fix: replace border-gray-300 with a themable colour (#664)

Co-authored-by: Aman Harwara <amanharwara@protonmail.com>

app/assets/javascripts/components/Button.tsx

@@ -9,9 +9,9 @@ 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-gray-300 border-1 focus:bg-contrast hover:bg-contrast`,
+  normal: `${baseClass} bg-default color-text border-solid border-neutral 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-gray-300 border-1 focus:bg-contrast hover:bg-contrast`,
+  danger: `${baseClass} bg-default color-danger border-solid border-neutral border-1 focus:bg-contrast hover:bg-contrast`,
 };
 
 export const Button: FunctionComponent<{

app/assets/javascripts/components/DecoratedInput.tsx

@@ -31,7 +31,7 @@ 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-gray-300';
+    : 'border-solid border-1 border-neutral';
   const classes = `${baseClasses} ${stateClasses} ${className}`;
 
   const inputBaseClasses = 'w-full no-border color-text focus:shadow-none bg-contrast';

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-gray-300';
+    : 'border-solid border-1 border-neutral';
   const classes = `${base} ${stateClasses} ${className}`;
   return (
     <input type="text" className={classes} disabled={disabled} value={text} />

app/assets/javascripts/components/shared/HorizontalSeparator.tsx

@@ -6,5 +6,5 @@ type Props = {
 export const HorizontalSeparator: FunctionalComponent<Props> = ({
   classes = ''
 }) => {
-  return <hr className={`h-1px w-full bg-border no-border ${classes}`} />;
+  return <hr className={`h-1px w-full bg-neutral no-border ${classes}`} />;
 };

app/assets/javascripts/components/shared/ModalDialog.tsx

@@ -44,7 +44,7 @@ export const ModalDialogLabel: FunctionComponent<{
         Close
       </div>
     </div>
-    <hr className="h-1px bg-border no-border m-0" />
+    <hr className="h-1px bg-neutral no-border m-0" />
   </AlertDialogLabel>
 );
 

app/assets/javascripts/preferences/components/Content.tsx

@@ -18,8 +18,8 @@ export const Text: FunctionComponent<{ className?: string }> = ({
 }) => <p className={`${className} text-xs`}>{children}</p>;
 
 const buttonClasses = `block bg-default color-text rounded border-solid \
-border-1 border-gray-300 px-4 py-1.75 font-bold text-sm fit-content \
-focus:bg-contrast hover:bg-contrast`;
+border-1 px-4 py-1.75 font-bold text-sm fit-content \
+focus:bg-contrast hover:bg-contrast border-neutral`;
 
 export const LinkButton: FunctionComponent<{
   label: string;

app/assets/javascripts/preferences/components/PreferencesGroup.tsx

@@ -7,7 +7,7 @@ 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-gray-300 px-6 py-6 flex flex-col mb-3">
+  <div className="bg-default border-1 border-solid rounded border-neutral px-6 py-6 flex flex-col mb-3">
     {Array.isArray(children)
       ? children
         .filter(

app/assets/stylesheets/_preferences.scss

@@ -26,7 +26,7 @@
   }
 
   &:hover {
-    @extend .border-gray-300;
+    @extend .border-neutral;
     @extend .border-solid;
     @extend .border-1;
     @extend .bg-default;

app/assets/stylesheets/_sn.scss

@@ -203,7 +203,7 @@
 
   @extend .border-bottom-solid;
   @extend .border-b-1;
-  @extend .border-gray-300;
+  @extend .border-neutral;
 
   @extend .py-3;
   @extend .px-3;