feat: Use border-main (#721)

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;

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>
 );