chore: moved styles to workspace styles file

stakwork · Dec 21, 2024 · 0f8702f · 0f8702f
1 parent e7c26ff
commit 0f8702f
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 85 deletions.
diff --git a/src/people/SchematicPreviewer.tsx b/src/people/SchematicPreviewer.tsx
@@ -1,9 +1,16 @@
-/* eslint-disable no-use-before-define */
 import React from 'react';
 import MaterialIcon from '@material/react-material-icon';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
+import { EuiLoadingSpinner } from '@elastic/eui';
 import { ImageState, SchematicPreviewProps } from './interfaces';
+import {
+  ErrorContainer,
+  ErrorText,
+  ImgText,
+  SchematicImgContainer,
+  Skeleton,
+  StyledImage
+} from './widgetViews/workspace/style';
 
 const IMAGE_LOAD_TIMEOUT = 30000;
 const DEFAULT_ALT_TEXT = 'Schematic preview';
@@ -70,12 +77,16 @@ export const SchematicPreview = memo(function ({
 
   const renderContent = () => {
     if (!imageSource) {
-      return <NoImageText>No image available</NoImageText>;
+      return <ImgText>Image</ImgText>;
     }
 
     return (
       <>
-        {imageState === 'loading' && <Skeleton />}
+        {imageState === 'loading' && (
+          <Skeleton>
+            <EuiLoadingSpinner size="xl" />
+          </Skeleton>
+        )}
 
         {imageState === 'error' && (
           <ErrorContainer>
@@ -96,72 +107,15 @@ export const SchematicPreview = memo(function ({
   };
 
   return (
-    <Container className={className} data-testid={testId} role="img" aria-label={DEFAULT_ALT_TEXT}>
+    <SchematicImgContainer
+      className={className}
+      data-testid={testId}
+      role="img"
+      aria-label={DEFAULT_ALT_TEXT}
+    >
       {renderContent()}
-    </Container>
+    </SchematicImgContainer>
   );
 });
 
 SchematicPreview.displayName = 'SchematicPreview';
-
-const Container = styled.div`
-  position: relative;
-  aspect-ratio: 16/9;
-  width: 100%;
-  border-radius: 10px;
-  overflow: hidden;
-  background-color: var(--background-secondary);
-`;
-
-const Skeleton = styled.div`
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(90deg, #ebedf1 0%, #f2f3f5 50%, #ebedf1 100%);
-  background-size: 200% 100%;
-  animation: pulse 2s ease-in-out infinite;
-
-  @keyframes pulse {
-    0% {
-      background-position: 100% 0;
-    }
-    100% {
-      background-position: -100% 0;
-    }
-  }
-`;
-
-const ErrorContainer = styled.div`
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 16px;
-  background-color: var(--background-error);
-  color: var(--text-error);
-`;
-
-const ErrorText = styled.span`
-  font-size: 14px;
-  font-weight: 500;
-  text-align: center;
-`;
-
-const NoImageText = styled.span`
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-secondary);
-  font-size: 14px;
-`;
-
-const StyledImage = styled.img<{ isVisible: boolean }>`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  opacity: ${(props: { isVisible: boolean }) => (props.isVisible ? 1 : 0)};
-`;
diff --git a/src/people/widgetViews/WorkspaceMission.tsx b/src/people/widgetViews/WorkspaceMission.tsx
@@ -119,23 +119,6 @@ const FeatureData = styled.div`
   color: #5f6368;
 `;
 
-export const ImgContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 9rem;
-  border-radius: 10px;
-  overflow: hidden;
-  background-color: #ebedf1;
-`;
-
-export const SelectedImg = styled.img`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-`;
-
 export const RowWrap = styled.div`
   display: flex;
   align-items: center;

diff --git a/src/people/widgetViews/workspace/style.ts b/src/people/widgetViews/workspace/style.ts
@@ -1661,3 +1661,67 @@ export const CopyButtonGroup = styled.div`
     }
   }
 `;
+
+export const SchematicPreviewContainer = styled.div`
+  position: relative;
+  aspect-ratio: 16/9;
+  width: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+`;
+
+export const Skeleton = styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(90deg, #ebedf1 0%, #f2f3f5 50%, #ebedf1 100%);
+  background-size: 200% 100%;
+  animation: pulse 2s ease-in-out infinite;
+
+  @keyframes pulse {
+    0% {
+      background-position: 100% 0;
+    }
+    100% {
+      background-position: -100% 0;
+    }
+  }
+`;
+
+export const ErrorContainer = styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px;
+`;
+
+export const ErrorText = styled.span`
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  color: red;
+`;
+
+export const StyledImage = styled.img<{ isVisible: boolean }>`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: ${(props: { isVisible: boolean }) => (props.isVisible ? 1 : 0)};
+`;
+
+export const SchematicImgContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 9rem;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #ebedf1;
+`;