Bugfix/design reviews (#846)

* Easy changes from design review

* Easy changes from design review

* Midway through design review

* End of easy design review changes

* fixes ci secret for storybook

* cleanup

Co-authored-by: skuhlmann <[email protected]>

.github/workflows/ci_develop.yaml

@@ -16,6 +16,7 @@ env:
   DAOHAUS_HUB_DEVELOP_SKYNET_SEED: ${{ secrets.DAOHAUS_HUB_DEVELOP_SKYNET_SEED }}
   DAOHAUS_CORE_UI_DEVELOP_SKYNET_SEED: ${{ secrets.DAOHAUS_CORE_UI_DEVELOP_SKYNET_SEED }}
   DAOHAUS_SUMMON_SAFE_DEVELOP_SKYNET_SEED: ${{ secrets.DAOHAUS_SUMMON_SAFE_DEVELOP_SKYNET_SEED }}
+  DAOHAUS_UI_DEVELOP_SKYNET_SEED: ${{ secrets.DAOHAUS_UI_DEVELOP_SKYNET_SEED }}
 
 jobs:
   build:

libs/ui/src/components/atoms/ButtonV2/ButtonV2.tsx

@@ -17,20 +17,20 @@ export interface ButtonProps {
   disabled?: boolean;
   // ! Not Included untill talk with design
   // Shows loading spinner */
-  loading: boolean;
+  loading?: boolean;
   // ! Not Included untill talk with design
   /* The label to show in the button when loading is true */
   loadingText?: string;
   /** Set theme color */
-  colorVariant: ButtonColorVariant;
+  colorVariant?: ButtonColorVariant;
   /* Set the original html type of button */
   type?: 'button' | 'reset' | 'submit';
   /* Size of the button */
-  size: 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
   /** Controls button variant */
-  variant: 'solid' | 'outline' | 'link';
+  variant?: 'solid' | 'outline' | 'link';
   /* Width of the button element */
-  width: ButtonWidth;
+  width?: ButtonWidth;
   /* React node */
   children?: React.ReactNode;
   /* Css class name */

libs/ui/src/components/atoms/Checkbox/Checkbox.styles.ts

@@ -87,9 +87,9 @@ export const StyledIndicator = styled(CheckboxPrimitive.Indicator)`
 export const LabelContainer = styled.label`
   align-items: center;
   display: flex;
-  margin-left: 19px;
+  margin-left: 1.2rem;
   label {
-    margin-right: 10px;
+    margin-right: 0.1rem;
   }
   svg {
     transform: translateY(0.1rem);

libs/ui/src/components/atoms/Input/Input.styles.ts

@@ -90,7 +90,7 @@ export const WithIcon = styled.div`
   width: 100%;
 
   svg {
-    color: ${({ theme }: { theme: Theme }) => theme.fontColor};
+    color: ${({ theme }: { theme: Theme }) => theme.field.placeholderText};
     position: absolute;
     right: 2rem;
     top: 1.4rem;

libs/ui/src/components/atoms/Radio/Radio.styles.ts

@@ -105,7 +105,7 @@ export const RadioIndicator = styled(RadioGroupPrimitive.Indicator)`
 export const LabelContainer = styled.label`
   align-items: center;
   display: flex;
-  margin-left: 1.9rem;
+  margin-left: 1.2rem;
 
   label {
     margin-right: 0.1rem;

libs/ui/src/components/atoms/Tooltip/Tooltip.styles.ts

@@ -14,7 +14,7 @@ export const TooltipTrigger = styled(TooltipPrimitive.Trigger)`
   border: none;
 
   svg {
-    color: ${({ theme }: { theme: Theme }) => theme.secondary};
+    color: ${({ theme }: { theme: Theme }) => theme.primary};
   }
 `;
 

libs/ui/src/components/molecules/CollapsibleCard/CollapsibleCard.stories.tsx

@@ -1,5 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { H4, ParSm } from '../../atoms';
+import { ButtonV2 } from '../../atoms/ButtonV2';
 import { WrappedCheckbox } from '../WrappedCheckbox';
 import { WrappedInput } from '../WrappedInput';
 import { CollapsibleCard } from './CollapsibleCard';
@@ -62,6 +63,9 @@ ProposalCardExample.args = {
           },
         ]}
       />
+      <ButtonV2 variant="outline" colorVariant="secondary">
+        Click Me
+      </ButtonV2>
     </div>
   ),
   collapsibleContent: (

libs/ui/src/components/molecules/Dialog/Dialog.styles.ts

@@ -43,8 +43,7 @@ export const StyledDialogContent = styled(DialogPrimitive.Content)`
   justify-content: space-between;
   left: 50%;
   max-height: 85vh;
-  max-width: 90vw;
-  min-width: 50rem;
+  max-width: 80%;
   min-height: 23rem;
   padding: 3rem;
   position: fixed;

libs/ui/src/components/molecules/Toast/Toast.stories.tsx

@@ -25,7 +25,7 @@ AtomToastDescription.args = {
 export const AtomToastLinks = Template.bind({});
 AtomToastLinks.args = {
   title: 'Title goes here',
-  description: 'Description Goes here and has more detail/text than the title',
+  description: 'Description Goes here and has more detail/text than the title ',
   toastLinks: {
     leftLink: {
       path: 'https://daohaus.club/',

libs/ui/src/components/molecules/Toast/Toast.styles.ts

@@ -35,7 +35,7 @@ export const ToastViewport = styled(ToastPrimitive.Viewport)`
   padding: 20px;
   gap: 10px;
   width: 395px;
-  max-width: 100vw;
+  max-width: 90vw;
   margin: 0;
   list-style: none;
   z-index: 2147483647;

libs/ui/src/theme/atoms/button.ts

@@ -20,7 +20,7 @@ export const PrimaryDarkButton: ButtonColorTargets = {
   border: primaryDark.step9,
   hoverBg: primaryDark.step10,
   hoverBorder: primaryDark.step10,
-  focusBg: primaryDark.step10,
+  focusBg: primaryDark.step9,
   focusBorder: primaryDark.step11,
   disabledBg: primaryDark.step6,
   disabledBorder: primaryDark.step6,
@@ -36,7 +36,7 @@ export const SecondaryDarkButton: ButtonColorTargets = {
   border: secondaryDark.step6,
   hoverBg: secondaryDark.step7,
   hoverBorder: secondaryDark.step7,
-  focusBg: secondaryDark.step7,
+  focusBg: secondaryDark.step6,
   focusBorder: secondaryDark.step8,
   disabledBg: secondaryDark.step3,
   disabledBorder: secondaryDark.step3,
@@ -69,7 +69,7 @@ export const SuccessDarkButton: ButtonColorTargets = {
   border: successDark.step9,
   hoverBg: successDark.step10,
   hoverBorder: successDark.step10,
-  focusBg: successDark.step10,
+  focusBg: successDark.step9,
   focusBorder: successDark.step11,
   disabledBg: successDark.step6,
   disabledBorder: successDark.step6,
@@ -85,7 +85,7 @@ export const WarningDarkButton: ButtonColorTargets = {
   border: warningDark.step9,
   hoverBg: warningDark.step10,
   hoverBorder: warningDark.step10,
-  focusBg: warningDark.step10,
+  focusBg: warningDark.step9,
   focusBorder: warningDark.step11,
   disabledBg: warningDark.step6,
   disabledBorder: warningDark.step6,
@@ -99,7 +99,7 @@ export const DangerDarkButton: ButtonColorTargets = {
   text: dangerDark.step12,
   bg: dangerDark.step9,
   border: dangerDark.step9,
-  hoverBg: dangerDark.step10,
+  hoverBg: dangerDark.step9,
   hoverBorder: dangerDark.step10,
   focusBg: dangerDark.step10,
   focusBorder: dangerDark.step11,
@@ -117,7 +117,7 @@ export const PrimaryLightButton: ButtonColorTargets = {
   border: primary.step9,
   hoverBg: primary.step10,
   hoverBorder: primary.step10,
-  focusBg: primary.step10,
+  focusBg: primary.step9,
   focusBorder: primary.step11,
   disabledBg: primary.step6,
   disabledBorder: primary.step6,
@@ -133,7 +133,7 @@ export const SecondaryLightButton: ButtonColorTargets = {
   border: secondary.step6,
   hoverBg: secondary.step7,
   hoverBorder: secondary.step7,
-  focusBg: secondary.step7,
+  focusBg: secondary.step6,
   focusBorder: secondary.step8,
   disabledBg: secondary.step3,
   disabledBorder: secondary.step3,
@@ -143,6 +143,7 @@ export const SecondaryLightButton: ButtonColorTargets = {
   outlineDisabled: secondary.step6,
 };
 
+// TODO Delete after Button2 is used
 export const TertiaryLightButton: ButtonColorTargets = {
   bg: utility.transparent,
   text: primary.step11,
@@ -165,7 +166,7 @@ export const SuccessLightButton: ButtonColorTargets = {
   border: success.step9,
   hoverBg: success.step10,
   hoverBorder: success.step10,
-  focusBg: success.step10,
+  focusBg: success.step9,
   focusBorder: success.step11,
   disabledBg: success.step6,
   disabledBorder: success.step6,
@@ -181,7 +182,7 @@ export const WarningLightButton: ButtonColorTargets = {
   border: warning.step9,
   hoverBg: warning.step10,
   hoverBorder: warning.step10,
-  focusBg: warning.step10,
+  focusBg: warning.step9,
   focusBorder: warning.step11,
   disabledBg: warning.step6,
   disabledBorder: warning.step6,
@@ -197,7 +198,7 @@ export const DangerLightButton: ButtonColorTargets = {
   border: danger.step9,
   hoverBg: danger.step10,
   hoverBorder: danger.step10,
-  focusBg: danger.step10,
+  focusBg: danger.step9,
   focusBorder: danger.step11,
   disabledBg: danger.step6,
   disabledBorder: danger.step6,

libs/ui/src/theme/global/colors.ts

@@ -7,6 +7,7 @@ import {
   greenDark,
   indigo,
   indigoDark,
+  indigoDarkA,
   orange,
   orangeDark,
   red,
@@ -86,6 +87,21 @@ export const secondaryDark = {
   step12: indigoDark.indigo12,
 };
 
+export const secondaryDarkA = {
+  step1: indigoDarkA.indigoA1,
+  step2: indigoDarkA.indigoA2,
+  step3: indigoDarkA.indigoA3,
+  step4: indigoDarkA.indigoA4,
+  step5: indigoDarkA.indigoA5,
+  step6: indigoDarkA.indigoA6,
+  step7: indigoDarkA.indigoA7,
+  step8: indigoDarkA.indigoA8,
+  step9: indigoDarkA.indigoA9,
+  step10: indigoDarkA.indigoA10,
+  step11: indigoDarkA.indigoA11,
+  step12: indigoDarkA.indigoA12,
+};
+
 // * Neutral Colors
 
 export const neutral = {

libs/ui/src/theme/theme.ts

@@ -5,6 +5,7 @@ import {
   primaryDark,
   secondary,
   secondaryDark,
+  secondaryDarkA,
   neutral,
   neutralDark,
   utility,
@@ -35,7 +36,7 @@ export const defaultDarkTheme: Theme = {
   bgColor: neutralDark.step1,
   fontColor: secondaryDark.step12,
   primary: primaryDark.step9,
-  secondary: secondary.step9,
+  secondary: secondaryDark.step9,
   error: utilityDark.danger,
   warning: utilityDark.warning,
   warningBg: utilityDark.warningBg,
@@ -59,12 +60,14 @@ export const defaultDarkTheme: Theme = {
   card: {
     bg: secondaryDark.step2,
     border: secondaryDark.step5,
+    // TODO Delete unused card states
     hoverBg: secondaryDark.step3,
     hoverBorder: secondaryDark.step6,
     focusBg: secondaryDark.step2,
     focusBorder: secondaryDark.step7,
     disabledBg: neutralDark.step2,
     disabledBorder: neutralDark.step5,
+    // end unused card states
     successText: utilityDark.successText,
     successBg: utilityDark.successBg,
     successBorder: utilityDark.successBorder,
@@ -173,8 +176,9 @@ export const defaultDarkTheme: Theme = {
     text: primaryDark.step11,
     hoverText: primaryDark.step10,
     focusText: primaryDark.step12,
-    bgInnerCard: secondaryDark.step5,
-    borderInnerCard: secondaryDark.step6,
+    // bgInnerCard: secondaryDark.step5,
+    bgInnerCard: secondaryDarkA.step3,
+    borderInnerCard: secondaryDark.step5,
   },
   dropdown: DropdownDark,
   dialog: {