From f2e14f430ce17f40b03e8b97ba81a279f66e26ce Mon Sep 17 00:00:00 2001
From: Christian van der Loo <chris.vanderloo@yahoo.com>
Date: Tue, 11 Oct 2022 21:56:13 -0400
Subject: [PATCH] feat: color consistency, use stone instead of gray

---
 packages/web/src/components/Button.tsx        |  6 ++---
 packages/web/src/components/FormBox.tsx       |  4 ++--
 packages/web/src/components/FormInput.tsx     | 12 +++++-----
 .../web/src/components/files/Dropdown.tsx     |  8 +++----
 packages/web/src/components/files/Toolbar.tsx | 22 +++++++++----------
 packages/web/src/pages/Authenticate.tsx       |  2 +-
 6 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/web/src/components/Button.tsx b/packages/web/src/components/Button.tsx
index 71ef4f4..dd283b6 100644
--- a/packages/web/src/components/Button.tsx
+++ b/packages/web/src/components/Button.tsx
@@ -11,12 +11,12 @@ export default function Button(props) {
         font-normal
         rounded
         transition
-        focus:text-gray-700 
+        focus:text-stone-700 
         focus:bg-white 
         focus:border-blue-600 
         focus:outline-none 
-        disabled:bg-gray-300
-        dark:disabled:bg-gray-800
+        disabled:bg-stone-300
+        dark:disabled:bg-stone-800
         disabled:text-neutral-400
         dark:disabled:text-neutral-600
         hover:shadow-md
diff --git a/packages/web/src/components/FormBox.tsx b/packages/web/src/components/FormBox.tsx
index fe0af50..2792deb 100644
--- a/packages/web/src/components/FormBox.tsx
+++ b/packages/web/src/components/FormBox.tsx
@@ -1,8 +1,8 @@
 export default function FormBox(props) {
   return (
-    <div className="w-full flex justify-center items-center">
+    <div className="flex items-center justify-center w-full">
       <div
-        className={`flex-col m-12 w-96 p-12 self-center rounded-2xl shadow-lg border-opacity-10 border-2 border-neutral-900 bg-gray-200 dark:bg-gray-700 text-neutral-800 dark:text-neutral-100 ${props.className}`}
+        className={`flex-col m-12 w-96 p-12 self-center rounded-2xl shadow-lg border-opacity-10 border-2 border-neutral-900 bg-stone-200 dark:bg-stone-700 text-neutral-800 dark:text-neutral-100 ${props.className}`}
       >
         {props.children}
       </div>
diff --git a/packages/web/src/components/FormInput.tsx b/packages/web/src/components/FormInput.tsx
index a19a6ba..18796ad 100644
--- a/packages/web/src/components/FormInput.tsx
+++ b/packages/web/src/components/FormInput.tsx
@@ -9,21 +9,21 @@ export default function FormInput(props) {
         py-1.5
         text-base
         font-normal
-        text-gray-700
+        text-stone-700
         bg-white 
-        dark:bg-gray-600 
+        dark:bg-stone-600 
         dark:text-neutral-50
         bg-clip-padding
-        border border-solid border-gray-300
+        border border-solid border-stone-300
         dark:border-neutral-700
         rounded
         transition
         ease-in-out
         m-0
         dark:focus:text-neutral-50 
-        dark:focus:bg-gray-700
-        focus:text-gray-700 focus:bg-white 
-        focus:border-blue-600 focus:outline-none placeholder:text-gray-400
+        dark:focus:bg-stone-700
+        focus:text-stone-700 focus:bg-white 
+        focus:border-blue-600 focus:outline-none placeholder:text-stone-400
       "
       {...props}
     />
diff --git a/packages/web/src/components/files/Dropdown.tsx b/packages/web/src/components/files/Dropdown.tsx
index 4a595a9..9726bbf 100644
--- a/packages/web/src/components/files/Dropdown.tsx
+++ b/packages/web/src/components/files/Dropdown.tsx
@@ -56,12 +56,12 @@ export default function Dropdown<T extends string>(
         py-1.5
         text-base
         font-normal
-        text-gray-700
+        text-stone-700
         bg-white 
-        dark:bg-gray-600 
+        dark:bg-stone-600 
         dark:text-neutral-50
         bg-clip-padding
-        border border-solid border-gray-300
+        border border-solid border-stone-300
         dark:border-neutral-700
         rounded
         transition
@@ -70,7 +70,7 @@ export default function Dropdown<T extends string>(
         shadow-sm
         ${
           expanded
-            ? "dark:text-neutral-50 dark:bg-gray-700 text-gray-700 bg-white border-blue-600 outline-none"
+            ? "dark:text-neutral-50 dark:bg-stone-700 text-gray-700 bg-white border-blue-600 outline-none"
             : ""
         } ${display ? "" : "w-48"}`}
         onClick={toggleExpanded}
diff --git a/packages/web/src/components/files/Toolbar.tsx b/packages/web/src/components/files/Toolbar.tsx
index e921610..0e69e40 100644
--- a/packages/web/src/components/files/Toolbar.tsx
+++ b/packages/web/src/components/files/Toolbar.tsx
@@ -35,7 +35,7 @@ function NewFileBody({
   return (
     <>
       <div className="p-2 w-96">
-        <h1 className="text-xl font-bold mb-2">
+        <h1 className="mb-2 text-xl font-bold">
           New {type === "file" ? "File" : "Folder"}
         </h1>
         <FormInput
@@ -120,7 +120,7 @@ export function AddBox() {
     <div className="flex flex-col justify-between">
       <label
         htmlFor="search"
-        className="text-sm font-medium text-gray-700 dark:text-gray-400"
+        className="text-sm font-medium text-stone-700 dark:text-stone-400"
       >
         Add Files
       </label>
@@ -145,14 +145,14 @@ export function AddBox() {
 
 export function SearchBar() {
   return (
-    <div className="flex-1 flex-col justify-between">
+    <div className="flex-col justify-between flex-1">
       <label
         htmlFor="search"
-        className="text-sm font-medium text-gray-700 dark:text-gray-400 md:block hidden"
+        className="hidden text-sm font-medium text-stone-700 dark:text-stone-400 md:block"
       >
         Search
       </label>
-      <div className="mt-1 relative rounded-md shadow-sm">
+      <div className="relative mt-1 rounded-md shadow-sm">
         <FormInput
           type="text"
           name="search"
@@ -161,7 +161,7 @@ export function SearchBar() {
         />
         <div className="absolute inset-y-0 right-0 flex items-center">
           <button
-            className="btn px-6 h-full bg-orange-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-orange-600 hover:shadow-lg focus:bg-orange-600  focus:shadow-lg focus:outline-none focus:ring-0 active:bg-orange-700 active:shadow-lg transition duration-150 ease-in-out flex items-center"
+            className="flex items-center h-full px-6 text-xs font-medium leading-tight text-white uppercase bg-orange-500 rounded shadow-md btn hover:bg-orange-600 hover:shadow-lg focus:bg-orange-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-orange-700 active:shadow-lg transition duration-150 ease-in-out"
             type="button"
             id="search-button"
           >
@@ -225,12 +225,12 @@ export function ViewBar({ viewMode, setViewMode }) {
     <div className="flex flex-col justify-between">
       <label
         htmlFor="view-mode"
-        className="text-sm font-medium text-gray-700 dark:text-gray-400"
+        className="text-sm font-medium text-stone-700 dark:text-stone-400"
       >
         View Mode
       </label>
       <div
-        className="inline-flex shadow-sm rounded overflow-hidden"
+        className="inline-flex overflow-hidden rounded shadow-sm"
         id="view-mode"
       >
         <MultiSelectBar
@@ -270,12 +270,12 @@ export function SortBar({ sortBy, setSortBy }: SortBarProps) {
       <div className="flex flex-col justify-between">
         <label
           htmlFor="view-mode"
-          className="text-sm font-medium text-gray-700 dark:text-gray-400"
+          className="text-sm font-medium text-stone-700 dark:text-stone-400"
         >
           Sorting
         </label>
         <div
-          className="inline-flex shadow-sm rounded overflow-hidden"
+          className="inline-flex overflow-hidden rounded shadow-sm"
           id="view-mode"
         >
           <Dropdown
@@ -288,7 +288,7 @@ export function SortBar({ sortBy, setSortBy }: SortBarProps) {
       {/* <div className="flex flex-col justify-between">
         <span />
         <div
-          className="inline-flex shadow-sm rounded overflow-hidden"
+          className="inline-flex overflow-hidden rounded shadow-sm"
           id="view-mode"
         >
           Test2
diff --git a/packages/web/src/pages/Authenticate.tsx b/packages/web/src/pages/Authenticate.tsx
index 26f2595..beb78f3 100644
--- a/packages/web/src/pages/Authenticate.tsx
+++ b/packages/web/src/pages/Authenticate.tsx
@@ -195,7 +195,7 @@ export default function Authenticate({ type }: { type: AuthenticateType }) {
         providerText={providerText}
         handleProvider={handleProvider}
       /> */}
-      <div className="w-full h-px mt-4 mb-1 bg-gray-300 dark:bg-gray-600" />
+      <div className="w-full h-px mt-4 mb-1 bg-stone-300 dark:bg-stone-600" />
       <span className="text-sm text-gray-700 dark:text-gray-300">
         {type === AuthenticateType.LOGIN ? (
           <>
-- 
2.51.2