techvariable · durgatechvar · Jun 9, 2023 · May 25, 2023
diff --git a/src/components/common/buttons/icon-button-basic/readme.md b/src/components/common/buttons/icon-button-basic/readme.md
@@ -30,7 +30,6 @@
  - [editor-page](../../../editorPage/editor-page)
  - [insert-node-modal](../../../editorPage/insert-node-modal)
  - [save-query-modal](../../../editorPage/save-query-modal)
- - [side-bar](../../../settingsPage/side-bar)
 
 ### Graph
 ```mermaid
@@ -40,7 +39,6 @@ graph TD;
  editor-page --> icon-button-basic
  insert-node-modal --> icon-button-basic
  save-query-modal --> icon-button-basic
- side-bar --> icon-button-basic
  style icon-button-basic fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/src/components/permissionPage/add-role/add-role.tsx b/src/components/permissionPage/add-role/add-role.tsx
@@ -57,6 +57,7 @@ export class AddRole {
  disabled={!hasAccess(this.parsedPermissions, { name: 'permissions', permission: 'write' })}
  clickHandler={() => this.toggleModalState()}
  varient="outlined"
+ color="tertiary"
  >
  Add Role
  </icon-label-submit-button>

diff --git a/src/components/permissionPage/permission-editor/permission-editor.tsx b/src/components/permissionPage/permission-editor/permission-editor.tsx
@@ -232,7 +232,7 @@ export class PermissionEditor {
  disabled={this.syncVal === '' || !hasAccess(this.parsedPermissions, { name: 'permissions', permission: 'update' }) || this.isLoading}
  loading={this.isLoading}
  varient="outlined"
- color="primary"
+ color="tertiary"
  >
  Update
  </icon-label-submit-button>

diff --git a/src/components/settingsPage/basic-settings/basic-settings.tsx b/src/components/settingsPage/basic-settings/basic-settings.tsx
@@ -200,7 +200,7 @@ export class BasicSettings {
  <div
  id="dropdown"
  style={{ zIndex: '5' }}
- class={` max-h-80 overflow-auto custom-scrollbar bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 ${
+ class={` max-h-80 overflow-auto custom-scrollbar bg-white divide-y divide-gray-100 rounded-lg shadow w-44 ${
  this.viewClasses[`${this.generalSettingsState[item]['dropDownOpen']}`]
  }`}
  >
@@ -210,7 +210,7 @@ export class BasicSettings {
  <li>
  <button
  onClick={() => this.generalSettingsSelectHandler(selectedOption, item)}
- class="w-full font-medium block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white overflow-hidden overflow-ellipsis"
+ class="w-full font-medium block px-4 py-2 bg-white hover:bg-gray-200 text-gray-800  overflow-hidden overflow-ellipsis"
  >
  {selectedOption.toUpperCase()}
  </button>
@@ -302,7 +302,7 @@ export class BasicSettings {
  <li>
  <button
  onClick={() => this.selectHandler(selectedOption, item)}
- class="w-full font-medium block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white overflow-hidden overflow-ellipsis"
+ class="w-full font-medium block px-4 py-2 hover:bg-gray-200 text-gray-700 dark:hover:bg-gray-600 dark:hover:text-white overflow-hidden overflow-ellipsis"
  >
  {selectedOption.toUpperCase()}
  </button>

diff --git a/src/components/settingsPage/side-bar/readme.md b/src/components/settingsPage/side-bar/readme.md
@@ -17,13 +17,11 @@
 
 ### Depends on
 
-- [icon-button-basic](../../common/buttons/icon-button-basic)
 - [icon-label-submit-button](../../common/buttons/icon-label-submit-button)
 
 ### Graph
 ```mermaid
 graph TD;
- side-bar --> icon-button-basic
  side-bar --> icon-label-submit-button
  style side-bar fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/src/components/settingsPage/side-bar/side-bar.tsx b/src/components/settingsPage/side-bar/side-bar.tsx
@@ -126,11 +126,12 @@ export class SideBar {
  <td class="px-6 py-4 ">{this.api}</td>
 
  <td class="px-6 py-4 text-right">
- <icon-button-basic
+ <icon-label-submit-button
  title="Copy to Clip Board"
+ varient="text"
+ color="tertiary"
  clickHandler={() => this.copyToClipboard()}
- color="secondary"
- icon={
+ startIcon={
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path
  stroke-linecap="round"
@@ -146,7 +147,7 @@ export class SideBar {
  <icon-label-submit-button
  title="Delete API key"
  varient="text"
- color="secondary"
+ color="tertiary"
  disabled={!hasAccess(this.parsedPermissions, { name: 'settings', permission: 'delete' })}
  clickHandler={() => this.deleteHandler()}
  startIcon={
@@ -158,7 +159,7 @@ export class SideBar {
  />
  </svg>
  }
- ></icon-label-submit-button>
+ />
  </td>
  </tr>
  </tbody>
@@ -176,7 +177,7 @@ export class SideBar {
  title="Create New API Key"
  clickHandler={() => this.createHandler()}
  disabled={!hasAccess(this.parsedPermissions, { name: 'settings', permission: 'write' })}
- color="secondary"
+ color="tertiary"
  customClass="mt-3"
  >
  Create New Key

diff --git a/src/global/global.css b/src/global/global.css
@@ -618,6 +618,11 @@ Ensure the default browser behavior of the `hidden` attribute.
  margin-right: 0.5rem;
 }
 
+.mx-4 {
+ margin-left: 1rem;
+ margin-right: 1rem;
+}
+
 .mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
@@ -638,11 +643,6 @@ Ensure the default browser behavior of the `hidden` attribute.
  margin-bottom: 1.5rem;
 }
 
-.mx-4 {
- margin-left: 1rem;
- margin-right: 1rem;
-}
-
 .-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
@@ -686,6 +686,10 @@ Ensure the default browser behavior of the `hidden` attribute.
  margin-right: -0.25rem;
 }
 
+.mt-2 {
+ margin-top: 0.5rem;
+}
+
 .ml-0 {
  margin-left: 0px;
 }
@@ -710,10 +714,6 @@ Ensure the default browser behavior of the `hidden` attribute.
  margin-bottom: 1.5rem;
 }
 
-.mt-2 {
- margin-top: 0.5rem;
-}
-
 .mb-2 {
  margin-bottom: 0.5rem;
 }
@@ -810,8 +810,8 @@ Ensure the default browser behavior of the `hidden` attribute.
  height: 2rem;
 }
 
-.h-12 {
- height: 3rem;
+.h-10 {
+ height: 2.5rem;
 }
 
 .h-7 {
@@ -838,6 +838,10 @@ Ensure the default browser behavior of the `hidden` attribute.
  height: 24rem;
 }
 
+.h-12 {
+ height: 3rem;
+}
+
 .h-11 {
  height: 2.75rem;
 }
@@ -846,10 +850,6 @@ Ensure the default browser behavior of the `hidden` attribute.
  height: 5rem;
 }
 
-.h-10 {
- height: 2.5rem;
-}
-
 .max-h-60 {
  max-height: 15rem;
 }
@@ -1102,6 +1102,10 @@ Ensure the default browser behavior of the `hidden` attribute.
  gap: 0.25rem;
 }
 
+.gap-8 {
+ gap: 2rem;
+}
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1414,6 +1418,11 @@ Ensure the default browser behavior of the `hidden` attribute.
  background-color: rgb(224 242 254 / var(--tw-bg-opacity));
 }
 
+.bg-green-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-75 {
  --tw-bg-opacity: 0.75;
 }
@@ -2492,6 +2501,11 @@ Ensure the default browser behavior of the `hidden` attribute.
 }
 
 @media (min-width: 640px) {
+ .sm\:mx-auto {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
  .sm\:my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
@@ -2502,11 +2516,6 @@ Ensure the default browser behavior of the `hidden` attribute.
  margin-right: 0px;
  }
 
- .sm\:mx-auto {
- margin-left: auto;
- margin-right: auto;
- }
-
  .sm\:mt-0 {
  margin-top: 0px;
  }
@@ -2636,10 +2645,6 @@ Ensure the default browser behavior of the `hidden` attribute.
  width: 50%;
  }
 
- .md\:w-80 {
- width: 20rem;
- }
-
  .md\:w-3\/4 {
  width: 75%;
  }
@@ -2652,6 +2657,10 @@ Ensure the default browser behavior of the `hidden` attribute.
  width: 100%;
  }
 
+ .md\:w-80 {
+ width: 20rem;
+ }
+
  .md\:grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }
@@ -2675,15 +2684,14 @@ Ensure the default browser behavior of the `hidden` attribute.
 }
 
 @media (min-width: 1024px) {
- .lg\:mx-auto {
- margin-left: auto;
- margin-right: auto;
- }
-
  .lg\:flex {
  display: flex;
  }
 
+ .lg\:w-80 {
+ width: 20rem;
+ }
+
  .lg\:w-2\/3 {
  width: 66.666667%;
  }
@@ -2692,10 +2700,6 @@ Ensure the default browser behavior of the `hidden` attribute.
  width: 50%;
  }
 
- .lg\:w-80 {
- width: 20rem;
- }
-
  .lg\:grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  }