Merge pull request #10 from alephium/ilias-fixes

Update colors and improve Approving screen
alephium · Oct 9, 2022 · b356d46 · b356d46
2 parents 2d8ab46 + 21a8035
commit b356d46
Show file tree

Hide file tree

Showing 33 changed files with 211 additions and 171 deletions.
diff --git a/packages/extension/src/ui/components/AddressName.tsx b/packages/extension/src/ui/components/AddressName.tsx
@@ -32,7 +32,7 @@ const DotIcon = styled(DotSVG)`
   height: 8px;
   flex-shrink: 0;
   * {
-    fill: ${({ color, theme }) => color || theme.text1};
+    fill: ${({ color, theme }) => color || theme.font.primary};
   }
 `
 

diff --git a/packages/extension/src/ui/components/Alert.tsx b/packages/extension/src/ui/components/Alert.tsx
@@ -9,5 +9,5 @@ export const Alert = styled.div`
   background: rgba(255, 255, 255, 0.15);
   border-radius: 8px;
   margin: 40px 20px;
-  color: ${({ theme }) => theme.text1}; ;
+  color: ${({ theme }) => theme.font.primary}; ;
 `
diff --git a/packages/extension/src/ui/components/Amount.tsx b/packages/extension/src/ui/components/Amount.tsx
@@ -92,7 +92,7 @@ const Amount = ({
         )}
         {value && (
           <FadedPart>
-            <AlefSymbol color={theme.text1} />
+            <AlefSymbol color={theme.font.primary} />
           </FadedPart>
         )}
       </>

diff --git a/packages/extension/src/ui/components/Banner.tsx b/packages/extension/src/ui/components/Banner.tsx
@@ -9,7 +9,7 @@ const BannerWrapper = styled.div<{
   cursor: pointer;
   align-items: center;
   padding: 16px;
-  background-color: ${({ theme }) => theme.white};
+  background-color: ${({ theme }) => theme.bg.highlight};
   border-radius: 8px;
 
   ${({ noMargins = false }) =>
@@ -21,11 +21,11 @@ const BannerWrapper = styled.div<{
   ${({ type, theme }) =>
     type === 'danger' &&
     css`
-      background-color: ${({ theme }) => theme.red1};
+      background-color: ${({ theme }) => theme.global.alert};
 
       h1,
       p {
-        color: ${theme.text1};
+        color: ${theme.font.primary};
       }
     `};
 `
@@ -48,7 +48,7 @@ const BannerDescription = styled.p`
   font-weight: 400;
   font-size: 13px;
   line-height: 20px;
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.font.secondary};
 `
 
 export interface BannerProps {

diff --git a/packages/extension/src/ui/components/ColorPicker.tsx b/packages/extension/src/ui/components/ColorPicker.tsx
@@ -52,20 +52,20 @@ const ColorPicker = ({ value, onChange, className }: ColorPickerProps) => {
               styles={{
                 default: {
                   card: {
-                    backgroundColor: theme.bg2,
+                    backgroundColor: theme.bg.primary,
                     borderRadius: '9px'
                   },
                   triangle: {
-                    borderColor: `transparent transparent ${theme.bg2}`
+                    borderColor: `transparent transparent ${theme.bg.primary}`
                   },
                   hash: {
-                    backgroundColor: theme.bg3,
+                    backgroundColor: theme.bg.accent,
                     marginTop: '5px'
                   },
                   input: {
-                    backgroundColor: theme.bg3,
+                    backgroundColor: theme.bg.accent,
                     boxShadow: 'none',
-                    color: theme.text1,
+                    color: theme.font.primary,
                     height: '30px',
                     marginTop: '5px'
                   }
@@ -90,7 +90,7 @@ const InputContainer = styled.div`
   border-radius: 9px;
   height: 57px;
   padding: 15px;
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.bg.accent};
   margin-top: 20px;
   cursor: pointer;
 
@@ -100,7 +100,7 @@ const InputContainer = styled.div`
 `
 
 const Label = styled.label`
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.font.secondary};
   font-weight: normal;
   font-size: 17px;
   flex: 1;

diff --git a/packages/extension/src/ui/components/CopyTooltip.tsx b/packages/extension/src/ui/components/CopyTooltip.tsx
@@ -4,7 +4,7 @@ import CopyToClipboard from 'react-copy-to-clipboard'
 import styled from 'styled-components'
 
 export const Tooltip = styled.span`
-  background: ${({ theme }) => theme.white};
+  background: ${({ theme }) => theme.bg.highlight};
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
   border-radius: 20px;
   color: black;

diff --git a/packages/extension/src/ui/components/Fields.tsx b/packages/extension/src/ui/components/Fields.tsx
@@ -17,8 +17,8 @@ export const Field = styled.div<{ clickable?: boolean }>`
 `
 
 export const FieldError = styled.div<{ justify?: string }>`
-  color: ${({ theme }) => theme.text1};
-  background-color: ${({ theme }) => theme.red1};
+  color: ${({ theme }) => theme.font.primary};
+  background-color: ${({ theme }) => theme.global.alert};
   display: flex;
   justify-content: ${({ justify }) => (justify ? justify : 'center')};
   align-items: center;
@@ -29,28 +29,28 @@ export const FieldError = styled.div<{ justify?: string }>`
 `
 
 export const FieldGroup = styled.section<{ error?: boolean }>`
-  background: ${({ theme }) => theme.bg2};
+  background: ${({ theme }) => theme.bg.primary};
   border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.bg2};
+  border: 1px solid ${({ theme }) => theme.bg.primary};
   display: flex;
   flex-direction: column;
   margin-bottom: 12px;
   overflow: hidden;
   > ${Field} + ${Field} {
-    border-top: 1px solid ${({ theme }) => theme.bg1};
+    border-top: 1px solid ${({ theme }) => theme.bg.secondary};
   }
 
   ${({ theme, error = false }) =>
     error &&
     css`
-      border-color: ${theme.red1};
+      border-color: ${theme.global.alert};
     `}
 `
 
 export const FieldValue = styled.div`
   display: flex;
   align-items: center;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.font.primary};
 
   font-size: 15px;
   font-weight: 600;
@@ -72,7 +72,7 @@ export const FieldKey = styled(FieldValue)<{ withoutColor?: boolean }>`
   ${({ withoutColor = false }) =>
     !withoutColor &&
     css`
-      color: ${({ theme }) => theme.text2};
+      color: ${({ theme }) => theme.font.secondary};
     `}
 `
 

diff --git a/packages/extension/src/ui/components/HoverSelect.tsx b/packages/extension/src/ui/components/HoverSelect.tsx
@@ -128,7 +128,9 @@ const HoverSelect = ({
             key={value}
             onClick={() => handleItemClick(value)}
             animate={{
-              backgroundColor: shouldAnimateItem(value) ? colord(theme.bg3).lighten(0.05).toHex() : theme.bg3
+              backgroundColor: shouldAnimateItem(value)
+                ? colord(theme.bg.accent).lighten(0.05).toHex()
+                : theme.bg.accent
             }}
             variants={itemContainerVariants}
             style={{
@@ -182,7 +184,7 @@ const ItemList = styled(motion.div)`
   margin-left: auto;
   z-index: 3;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.bg.accent};
   overflow: auto;
 
   overscroll-behavior: none;
@@ -209,14 +211,14 @@ const ItemContainer = styled(motion.div)<{ borderRadius: number }>`
 
   padding: 15px;
 
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.bg.accent};
   color: rgba(255, 255, 255, 0.7);
   z-index: 1;
 
   cursor: pointer;
 
   &:hover {
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.font.primary};
 
     &::after {
       content: '';
@@ -233,7 +235,7 @@ const ItemContainer = styled(motion.div)<{ borderRadius: number }>`
 
   // Selected network
   &:first-child {
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.font.primary};
     font-weight: 600;
     cursor: default;
     position: sticky;
@@ -254,6 +256,6 @@ const ItemContent = styled(motion.div)`
 const Title = styled(motion.span)`
   position: absolute;
   opacity: 0;
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.font.secondary};
   font-weight: 600;
 `
diff --git a/packages/extension/src/ui/components/InputText.tsx b/packages/extension/src/ui/components/InputText.tsx
@@ -89,7 +89,7 @@ export type ControlledInputProps<T extends FieldValues> = InputFieldProps &
   AdditionalControlledInputProps
 
 const Label = styled.label`
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.font.secondary};
   font-weight: 500;
   height: 20px;
   font-size: 17px;
@@ -109,10 +109,10 @@ const InputCss = css`
 
   text-shadow: none;
 
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.bg.accent};
   border-radius: 9px;
   border: 0;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.font.primary};
 
   padding: 0 15px;
   padding-top: 22px;
@@ -127,7 +127,7 @@ const InputCss = css`
   }
 
   &:focus + ${Label} {
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.font.primary};
     font-weight: 600;
     transform: scale(0.7) translate3d(21px, 36px, 0);
   }
@@ -138,8 +138,8 @@ const InputCss = css`
   }
 
   &:disabled {
-    color: ${({ theme }) => theme.text2};
-    border-bottom: 1px solid ${({ theme }) => theme.text2};
+    color: ${({ theme }) => theme.font.secondary};
+    border-bottom: 1px solid ${({ theme }) => theme.font.secondary};
   }
 `
 
@@ -186,7 +186,7 @@ const LeftComponentContainer = styled.div`
   bottom: 0;
   height: ${inputHeight}px;
   width: ${inputHeight / 1.2}px;
-  border-right: 1px solid ${({ theme }) => theme.text3};
+  border-right: 1px solid ${({ theme }) => theme.font.secondary};
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/packages/extension/src/ui/components/Options.tsx b/packages/extension/src/ui/components/Options.tsx
@@ -23,7 +23,7 @@ const OptionWrapper = styled.div<{
   padding: 16px;
   border-radius: 8px;
   background-color: ${({ disabled, backgroundColor, theme }) =>
-    disabled ? theme.text3 : backgroundColor ?? theme.bg2};
+    disabled ? theme.font.secondary : backgroundColor ?? theme.bg.primary};
   cursor: ${({ disabled }) => (disabled ? 'auto' : 'pointer')};
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
 `

diff --git a/packages/extension/src/ui/components/Spinner.tsx b/packages/extension/src/ui/components/Spinner.tsx
@@ -15,5 +15,5 @@ export const Spinner: FC<CircularProgressProps> = (props) => {
     props = { ...props, value, variant: 'determinate' }
   }
 
-  return <CircularProgress {...props} style={{ ...defaultStyle, color: theme.text1, ...props.style }} />
+  return <CircularProgress {...props} style={{ ...defaultStyle, color: theme.font.primary, ...props.style }} />
 }
diff --git a/packages/extension/src/ui/components/Toggle.tsx b/packages/extension/src/ui/components/Toggle.tsx
@@ -17,8 +17,8 @@ const Toggle = ({ toggled, onToggle, className, disabled, handleColors, label }:
   const theme = useTheme()
 
   const toggleBackgroundVariants = {
-    off: { backgroundColor: theme.bg3 },
-    on: { backgroundColor: handleColors ? theme.bg2 : theme.blue1 }
+    off: { backgroundColor: theme.bg.accent },
+    on: { backgroundColor: handleColors ? theme.bg.primary : theme.global.accent }
   }
 
   const handleContainerVariants = {
@@ -27,8 +27,8 @@ const Toggle = ({ toggled, onToggle, className, disabled, handleColors, label }:
   }
 
   const handleVariants = {
-    off: { backgroundColor: handleColors?.[0] ?? theme.text1 },
-    on: { backgroundColor: handleColors?.[1] ?? theme.text1 }
+    off: { backgroundColor: handleColors?.[0] ?? theme.font.primary },
+    on: { backgroundColor: handleColors?.[1] ?? theme.font.primary }
   }
 
   const toggleState = toggled ? 'on' : 'off'
@@ -98,7 +98,7 @@ const ToggleHandleContainer = styled(motion.div)`
 const ToggleHandle = styled(motion.div)`
   height: 100%;
   width: 100%;
-  background-color: ${({ theme }) => theme.text1};
+  background-color: ${({ theme }) => theme.font.primary};
   border-radius: ${toggleWidth}px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 `
diff --git a/packages/extension/src/ui/components/ToggleSection.tsx b/packages/extension/src/ui/components/ToggleSection.tsx
@@ -43,13 +43,13 @@ const ToggleSection = ({ title, marginTop, onClick = () => null, children, class
 export default styled(ToggleSection)`
   display: flex;
   flex-direction: column;
-  background-color: ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.bg.primary};
   border-radius: 9px;
   padding-bottom: 21px;
 `
 
 const Label = styled.span`
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.font.secondary};
   font-weight: normal;
   height: 20px;
   font-size: 17px;
@@ -72,6 +72,6 @@ const CellChildren = styled(motion.div)`
 `
 
 const CellChildrenInner = styled.div`
-  border-top: 1px solid ${({ theme }) => theme.bg2};
+  border-top: 1px solid ${({ theme }) => theme.bg.primary};
   padding: 0 21px;
 `
diff --git a/packages/extension/src/ui/components/buttons/Button.tsx b/packages/extension/src/ui/components/buttons/Button.tsx
@@ -17,16 +17,16 @@ export const getVariantColor =
     switch (variant) {
       case 'warn':
         return hover
-          ? colord(theme.red4).saturate(1).lighten(0.075).toRgbString()
+          ? colord(theme.global.accent).saturate(1).lighten(0.075).toRgbString()
           : disabled
-          ? colord(theme.red4).alpha(0.5).toRgbString()
-          : theme.red4
+          ? colord(theme.global.accent).alpha(0.5).toRgbString()
+          : theme.global.accent
       case 'danger':
         return hover
-          ? colord(theme.red1).lighten(0.075).toRgbString()
+          ? colord(theme.global.alert).lighten(0.075).toRgbString()
           : disabled
-          ? colord(theme.red1).alpha(0.5).toRgbString()
-          : theme.red1
+          ? colord(theme.global.alert).alpha(0.5).toRgbString()
+          : theme.global.alert
     }
     return hover && !disabled ? `rgba(255, 255, 255, 0.25)` : `rgba(255, 255, 255, 0.15);`
   }
@@ -47,7 +47,7 @@ export const Button = styled.button<IButton>`
   width: 100%;
   outline: none;
   border: none;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.font.primary};
   cursor: pointer;
   transition: all 200ms ease-in-out;