🪟 🎨 Front end/Design tweaks (#14257)

* updates from pairing * cleanup from review
airbytehq · Jul 8, 2022 · cd1d960 · cd1d960
1 parent 1cf89c6
commit cd1d960
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 9 deletions.
diff --git a/airbyte-webapp/src/components/ConnectorIcon/ConnectorIcon.tsx b/airbyte-webapp/src/components/ConnectorIcon/ConnectorIcon.tsx
@@ -9,15 +9,14 @@ interface Props {
   small?: boolean;
 }
 
-export const Content = styled.div<{ $small?: boolean }>`
+export const Content = styled.div`
   height: 25px;
   width: 25px;
-  border-radius: ${({ $small }) => ($small ? 0 : 50)}%;
   overflow: hidden;
 `;
 
-export const ConnectorIcon: React.FC<Props> = ({ icon, className, small }) => (
-  <Content className={className} $small={small} aria-hidden="true">
+export const ConnectorIcon: React.FC<Props> = ({ icon, className }) => (
+  <Content className={className} aria-hidden="true">
     {getIcon(icon)}
   </Content>
 );
diff --git a/airbyte-webapp/src/components/ContentCard/ContentCard.tsx b/airbyte-webapp/src/components/ContentCard/ContentCard.tsx
@@ -14,7 +14,7 @@ interface IProps {
 const Title = styled(H5)<{ light?: boolean }>`
   padding: ${({ light }) => (light ? "19px 20px 20px" : "25px 25px 22px")};
   color: ${({ theme }) => theme.darkPrimaryColor};
-  box-shadow: ${({ light, theme }) => (light ? "none" : `0 1px 2px ${theme.shadowColor}`)};
+  border-bottom: ${({ light }) => (light ? "none" : "#e8e8ed 1px solid")};
   font-weight: 600;
   letter-spacing: 0.008em;
   border-radius: 10px 10px 0 0;

diff --git a/airbyte-webapp/src/components/EntityTable/components/ConnectorCell.tsx b/airbyte-webapp/src/components/EntityTable/components/ConnectorCell.tsx
@@ -23,7 +23,7 @@ const Image = styled(ConnectorIcon)`
 const ConnectorCell: React.FC<IProps> = ({ value, enabled, img }) => {
   return (
     <Content enabled={enabled}>
-      <Image small icon={img} />
+      <Image icon={img} />
       {value}
     </Content>
   );

diff --git a/airbyte-webapp/src/components/EntityTable/components/NameCell.tsx b/airbyte-webapp/src/components/EntityTable/components/NameCell.tsx
@@ -79,7 +79,7 @@ const NameCell: React.FC<Props> = ({ value, enabled, status, icon, img }) => {
   return (
     <Content>
       {status ? <StatusIcon title={title} status={statusIconStatus} /> : <Space />}
-      {icon && <Image small icon={img} />}
+      {icon && <Image icon={img} />}
       <Name enabled={enabled}>{value}</Name>
     </Content>
   );

diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.tsx
@@ -40,12 +40,12 @@ const ConnectionCell: React.FC<ConnectionCellProps> = ({
   return (
     <>
       <Connector>
-        <Icon small icon={sourceIcon} />
+        <Icon icon={sourceIcon} />
         {sourceDefinitionName}
       </Connector>
       <Connector>
         <Arrow icon={faArrowRight} />
-        <Icon small icon={destinationIcon} />
+        <Icon icon={destinationIcon} />
         {destinationDefinitionName}
       </Connector>
     </>