Share files from browser support (#1736)

* redesign * copy buttons * lingui extract * dynamic dropdown * copy working * remove label * styling suggestions * lingui extract * landing modal alignments * lingui extract * modal config * lingui extract * manage shared folder code refactor * lingui extract * modals progress working * added posthog event * lingui extract * changing widths * added width breaks * removed extra styled * compile translations * added status checks * close instead of cancel Co-authored-by: Thibaut Sardan <github@thib.top> Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com>
ChainSafe · Nov 18, 2021 · ef5e677 · ef5e677
1 parent 9c52fbe
commit ef5e677
Show file tree

Hide file tree

Showing 18 changed files with 710 additions and 282 deletions.
diff --git a/packages/common-components/src/Button/Button.tsx b/packages/common-components/src/Button/Button.tsx
@@ -109,6 +109,20 @@ const useStyles = makeStyles(
         },
         ...overrides?.Button?.variants?.secondary?.root
       },
+      text: {
+        backgroundColor: "transparent",
+        color: palette.additional["gray"][9],
+        "&:hover": {
+          ...overrides?.Button?.variants?.text?.hover
+        },
+        "&:focus": {
+          ...overrides?.Button?.variants?.text?.focus
+        },
+        "&:active": {
+          ...overrides?.Button?.variants?.text?.active
+        },
+        ...overrides?.Button?.variants?.text?.root
+      },
       tertiary: {
         backgroundColor: palette.additional["gray"][3],
         color: palette.common.black.main,
@@ -293,7 +307,7 @@ interface IButtonProps extends Omit<ReactButton, "size"> {
   className?: string
   children?: ReactNode | ReactNode[]
   fullsize?: boolean
-  variant?: "link" | "primary" | "secondary" |"tertiary" | "outline" | "dashed" | "danger"
+  variant?: "link" | "primary" | "secondary" |"tertiary" | "outline" | "dashed" | "danger" | "text"
   iconButton?: boolean
   size?: "large" | "medium" | "small"
   type?: "button" | "submit" | "reset"

diff --git a/packages/common-components/src/CheckboxInput/CheckboxInput.tsx b/packages/common-components/src/CheckboxInput/CheckboxInput.tsx
@@ -10,6 +10,7 @@ const useStyles = makeStyles(
       root: {
         cursor: "pointer",
         display: "flex",
+        alignItems: "center",
         ...overrides?.CheckboxInput?.root
       },
       checkbox: {

diff --git a/packages/common-components/src/Modal/Modal.tsx b/packages/common-components/src/Modal/Modal.tsx
@@ -94,6 +94,7 @@ const useStyles = makeStyles(
         margin: "auto",
         maxHeight: "100%",
         overflow: "auto",
+        alignItems: "center",
         "&.xs": {
           width: `calc(100% - ${constants.generalUnit * 2}px)`,
           maxWidth: breakpoints.width("xs"),

diff --git a/packages/common-components/src/SelectInput/SelectInput.tsx b/packages/common-components/src/SelectInput/SelectInput.tsx
@@ -8,7 +8,6 @@ const useStyles = makeStyles(
   ({ animation, constants, palette, overrides }: ITheme) =>
     createStyles({
       root: {
-        margin: 5,
         display: "block",
         ...overrides?.SelectInput?.root
       },

diff --git a/packages/common-components/src/stories/Button.stories.tsx b/packages/common-components/src/stories/Button.stories.tsx
@@ -15,12 +15,14 @@ export const actionsData = {
   onClick: action("onClickButton")
 }
 
-type VariantOption = "primary" | "secondary" | "tertiary" | "outline" | "dashed" | "danger" | undefined;
+type VariantOption = "primary" | "secondary" | "tertiary" | "link" | "text" | "outline" | "dashed" | "danger" | undefined;
 const variantOptions: VariantOption[] = [
   "primary",
   "outline",
   "dashed",
   "danger",
+  "link",
+  "text",
   undefined
 ]
 

diff --git a/packages/common-theme/src/Overrides/Button.ts b/packages/common-theme/src/Overrides/Button.ts
@@ -42,6 +42,18 @@ export interface IButtonOverride {
       focus?: Record<string, any>
       active?: Record<string, any>
     }
+    link?: {
+      root?: Record<string, any>
+      hover?: Record<string, any>
+      focus?: Record<string, any>
+      active?: Record<string, any>
+    }
+    text?: {
+      root?: Record<string, any>
+      hover?: Record<string, any>
+      focus?: Record<string, any>
+      active?: Record<string, any>
+    }
   }
   state?: {
     danger?: {

diff --git a/packages/files-ui/src/Components/Elements/CustomModal.tsx b/packages/files-ui/src/Components/Elements/CustomModal.tsx
@@ -13,7 +13,8 @@ const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
     },
     inner: {
       backgroundColor: constants.modalDefault.backgroundColor,
-      color: constants.modalDefault.color
+      color: constants.modalDefault.color,
+      width: "100%"
     },
     mobileStickyBottom: {
       [breakpoints.down("md")]: {
@@ -51,7 +52,8 @@ const CustomModal = ({ className, children, injectedClass, mobileStickyBottom =
       className={clsx(classes.root, className)}
       injectedClass={{
         closeIcon: clsx(classes.closeIcon, injectedClass?.closeIcon),
-        inner: clsx(classes.inner, mobileStickyBottom ? classes.mobileStickyBottom : undefined, injectedClass?.inner)
+        inner: clsx(classes.inner, mobileStickyBottom ? classes.mobileStickyBottom : undefined, injectedClass?.inner),
+        subModalInner: injectedClass?.subModalInner
       }}
       {...rest}
     >