feat: Use border-main (#721)

2021-11-05 19:29:54 +05:30
parent 54c09b9b49
commit 42b3cf5750
14 changed files with 44 additions and 33 deletions
--- a/app/assets/javascripts/components/Button.tsx
+++ b/app/assets/javascripts/components/Button.tsx
@@ -9,16 +9,20 @@ const baseClass = `rounded px-4 py-1.75 font-bold text-sm fit-content`;
 type ButtonType = 'normal' | 'primary' | 'danger';

 const buttonClasses: { [type in ButtonType]: string } = {
-  normal: `${baseClass} bg-default color-text border-solid border-neutral border-1 focus:bg-contrast hover:bg-contrast`,
+  normal: `${baseClass} bg-default color-text border-solid border-main border-1 focus:bg-contrast hover:bg-contrast`,
  primary: `${baseClass} no-border bg-info color-info-contrast hover:brightness-130 focus:brightness-130`,
-  danger: `${baseClass} bg-default color-danger border-solid border-neutral border-1 focus:bg-contrast hover:bg-contrast`,
+  danger: `${baseClass} bg-default color-danger border-solid border-main border-1 focus:bg-contrast hover:bg-contrast`,
 };

 export const Button: FunctionComponent<{
  className?: string;
  type: ButtonType;
  label: string;
-  onClick: (event: TargetedEvent<HTMLFormElement> | TargetedMouseEvent<HTMLButtonElement>) => void;
+  onClick: (
+    event:
+      | TargetedEvent<HTMLFormElement>
+      | TargetedMouseEvent<HTMLButtonElement>
+  ) => void;
  disabled?: boolean;
 }> = ({ type, label, className = '', onClick, disabled = false }) => {
  const buttonClass = buttonClasses[type];
--- a/app/assets/javascripts/components/DecoratedInput.tsx
+++ b/app/assets/javascripts/components/DecoratedInput.tsx
@@ -31,10 +31,11 @@ export const DecoratedInput: FunctionalComponent<Props> = ({
    'rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center bg-contrast';
  const stateClasses = disabled
    ? 'no-border'
-    : 'border-solid border-1 border-neutral';
+    : 'border-solid border-1 border-main';
  const classes = `${baseClasses} ${stateClasses} ${className}`;

-  const inputBaseClasses = 'w-full no-border color-text focus:shadow-none bg-contrast';
+  const inputBaseClasses =
+    'w-full no-border color-text focus:shadow-none bg-contrast';
  const inputStateClasses = disabled ? 'overflow-ellipsis' : '';
  return (
    <div className={`${classes} focus-within:ring-info`}>
--- a/app/assets/javascripts/components/FloatingLabelInput.tsx
+++ b/app/assets/javascripts/components/FloatingLabelInput.tsx
@@ -44,7 +44,7 @@ export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(

    const INPUT_CLASSNAME = `w-full h-full ${
      focused || value ? 'pt-6 pb-2' : 'py-2.5'
-    } px-3 text-input border-1 border-solid border-neutral rounded placeholder-medium text-input focus:ring-info ${
+    } px-3 text-input border-1 border-solid border-main rounded placeholder-medium text-input focus:ring-info ${
      isInvalid ? 'border-dark-red placeholder-dark-red' : ''
    } ${inputClassName}`;

--- a/app/assets/javascripts/components/Input.tsx
+++ b/app/assets/javascripts/components/Input.tsx
@@ -14,7 +14,7 @@ export const Input: FunctionalComponent<Props> = ({
  const base = `rounded py-1.5 px-3 text-input my-1 h-8 bg-contrast`;
  const stateClasses = disabled
    ? 'no-border'
-    : 'border-solid border-1 border-neutral';
+    : 'border-solid border-1 border-main';
  const classes = `${base} ${stateClasses} ${className}`;
  return (
    <input type="text" className={classes} disabled={disabled} value={text} />
--- a/app/assets/javascripts/components/InputWithIcon.tsx
+++ b/app/assets/javascripts/components/InputWithIcon.tsx
@@ -51,7 +51,7 @@ export const InputWithIcon: FunctionComponent<Props> = forwardRef(

    return (
      <div
-        className={`flex items-stretch position-relative bg-default border-1 border-solid border-neutral rounded focus-within:ring-info overflow-hidden ${
+        className={`flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
          disabled ? DISABLED_CLASSNAME : ''
        } ${className}`}
      >
--- a/app/assets/javascripts/components/NotesListOptionsMenu.tsx
+++ b/app/assets/javascripts/components/NotesListOptionsMenu.tsx
@@ -17,7 +17,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
  ({ setShowMenuFalse, application }) => {
    const menuClassName =
      'sn-dropdown sn-dropdown--animated min-w-70 overflow-y-auto \
-border-1 border-solid border-neutral text-sm z-index-dropdown-menu \
+border-1 border-solid border-main text-sm z-index-dropdown-menu \
 flex flex-col py-2 bottom-0 left-2 absolute';
    const [sortBy, setSortBy] = useState(() =>
      application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt)
--- a/app/assets/javascripts/preferences/components/Content.tsx
+++ b/app/assets/javascripts/preferences/components/Content.tsx
@@ -4,11 +4,17 @@ export const Title: FunctionComponent = ({ children }) => (
  <h2 className="text-base m-0 mb-1">{children}</h2>
 );

-export const Subtitle: FunctionComponent<{ className?: string }> = ({ children, className = "" }) => (
+export const Subtitle: FunctionComponent<{ className?: string }> = ({
+  children,
+  className = '',
+}) => (
  <h4 className={`font-medium text-sm m-0 mb-1 ${className}`}>{children}</h4>
 );

-export const SubtitleLight: FunctionComponent<{ className?: string }> = ({ children, className = "" }) => (
+export const SubtitleLight: FunctionComponent<{ className?: string }> = ({
+  children,
+  className = '',
+}) => (
  <h4 className={`font-normal text-sm m-0 mb-1 ${className}`}>{children}</h4>
 );

@@ -19,7 +25,7 @@ export const Text: FunctionComponent<{ className?: string }> = ({

 const buttonClasses = `block bg-default color-text rounded border-solid \
 border-1 px-4 py-1.75 font-bold text-sm fit-content \
-focus:bg-contrast hover:bg-contrast border-neutral`;
+focus:bg-contrast hover:bg-contrast border-main`;

 export const LinkButton: FunctionComponent<{
  label: string;
--- a/app/assets/javascripts/preferences/components/PreferencesGroup.tsx
+++ b/app/assets/javascripts/preferences/components/PreferencesGroup.tsx
@@ -7,18 +7,18 @@ const HorizontalLine: FunctionComponent<{ index: number; length: number }> = ({
 }) => (index < length - 1 ? <HorizontalSeparator classes="my-4" /> : null);

 export const PreferencesGroup: FunctionComponent = ({ children }) => (
-  <div className="bg-default border-1 border-solid rounded border-neutral px-6 py-6 flex flex-col mb-3">
+  <div className="bg-default border-1 border-solid rounded border-main px-6 py-6 flex flex-col mb-3">
    {Array.isArray(children)
      ? children
-        .filter(
-          (child) => child != undefined && child !== '' && child !== false
-        )
-        .map((child, i, arr) => (
-          <>
-            {child}
-            <HorizontalLine index={i} length={arr.length} />
-          </>
-        ))
+          .filter(
+            (child) => child != undefined && child !== '' && child !== false
+          )
+          .map((child, i, arr) => (
+            <>
+              {child}
+              <HorizontalLine index={i} length={arr.length} />
+            </>
+          ))
      : children}
  </div>
 );
--- a/app/assets/javascripts/purchaseFlow/PurchaseFlowView.tsx
+++ b/app/assets/javascripts/purchaseFlow/PurchaseFlowView.tsx
@@ -36,7 +36,7 @@ export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> =
    return (
      <div className="flex items-center justify-center h-full w-full absolute top-left-0 z-index-purchase-flow bg-grey-2">
        <div className="relative fit-content">
-          <div className="relative p-12 mb-4 bg-default border-1 border-solid border-neutral rounded">
+          <div className="relative p-12 mb-4 bg-default border-1 border-solid border-main rounded">
            <SNLogoFull className="mb-5" />
            <PurchaseFlowPaneSelector
              currentPane={currentPane}
--- a/app/assets/stylesheets/_menus.scss
+++ b/app/assets/stylesheets/_menus.scss
@@ -28,7 +28,7 @@
 .sn-menu-border {
  @extend .border-1;
  @extend .border-solid;
-  @extend .border-neutral;
+  @extend .border-main;
 }

 .sn-account-menu-headline {
--- a/app/assets/stylesheets/_preferences.scss
+++ b/app/assets/stylesheets/_preferences.scss
@@ -26,7 +26,7 @@
  }

  &:hover {
-    @extend .border-neutral;
+    @extend .border-main;
    @extend .border-solid;
    @extend .border-1;
    @extend .bg-default;
@@ -49,4 +49,4 @@
  iframe {
    height: 60vh;
  }
-}
+}
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -82,7 +82,7 @@
  @extend .text-input;
  @extend .color-text;
  @extend .border-solid;
-  @extend .border-neutral;
+  @extend .border-main;
  @extend .border-1;
  @extend .min-w-55;
 }
@@ -221,7 +221,7 @@

  @extend .border-bottom-solid;
  @extend .border-b-1;
-  @extend .border-neutral;
+  @extend .border-main;

  @extend .py-3;
  @extend .px-3;
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
    "pug-loader": "^2.4.0",
    "sass-loader": "^12.2.0",
    "serve-static": "^1.14.1",
-    "sn-stylekit": "5.2.10",
+    "sn-stylekit": "5.2.12",
    "ts-loader": "^9.2.6",
    "typescript": "4.4.4",
    "typescript-eslint": "0.0.1-alpha.0",
--- a/yarn.lock
+++ b/yarn.lock
@@ -7032,10 +7032,10 @@ slash@^3.0.0:
  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==

-sn-stylekit@5.2.10:
-  version "5.2.10"
-  resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-5.2.10.tgz#41d87b988bd8b258795659453e7d7101004d31a0"
-  integrity sha512-Rfom6JPdvF3pgKiSTqLAnUHCmSJ4Pd1NeEJbL1MF2YPufH+8dT6IwEazw/3X4MJKSlXICJ0b3H3Gg04B0Pjbzw==
+sn-stylekit@5.2.12:
+  version "5.2.12"
+  resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-5.2.12.tgz#afb0e1ccba5f0d99c74df92ecffe7d86da038053"
+  integrity sha512-n+mqdYGOSNtWgxPiNOAhZX/moSMfk3mMc1eVx53B+atGK+uKxI67LWSf8D6/ruBfu1ITjZfgx5LDi6jYkTJeXA==
  dependencies:
    "@reach/listbox" "^0.15.0"
    "@reach/menu-button" "^0.15.1"