From 146fe201bb09a86b72e5f1aa082a4e3f54500c22 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 2 Nov 2022 14:43:39 +0100
Subject: [PATCH] fix: code bg, bucket setting layout

---
 src/lib/components/code.svelte                |  2 +-
 .../bucket-[bucket]/settings/+page.svelte     | 29 ++++++++++---------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index f8ac3d894..707fd5e87 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -58,7 +58,7 @@
     @import 'prismjs/themes/prism.css';
 
     .box {
-        --p-box-background-color: var(--color-neutral-300) !important;
+        --p-box-background-color: var(--color-neutral-400) !important;
 
         body.theme-light & {
             --p-box-background-color: var(--color-neutral-5) !important;
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
index a65a043eb..498eb674b 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
@@ -9,7 +9,8 @@
         InputTags,
         InputNumber,
         InputSelect,
-        InputSwitch
+        InputSwitch,
+        FormList
     } from '$lib/elements/forms';
     import { bucket } from '../store';
     import { toLocaleDateTime } from '$lib/helpers/date';
@@ -208,14 +209,16 @@
                 <Heading tag="h2" size="7">{$bucket.name}</Heading>
 
                 <svelte:fragment slot="aside">
-                    <ul>
-                        <InputSwitch
-                            label={enabled ? 'Enabled' : 'Disabled'}
-                            id="toggle"
-                            bind:value={enabled} />
-                    </ul>
-                    <p>Created: {toLocaleDateTime($bucket.$createdAt)}</p>
-                    <p>Last Updated: {toLocaleDateTime($bucket.$updatedAt)}</p>
+                    <div>
+                        <FormList>
+                            <InputSwitch
+                                label={enabled ? 'Enabled' : 'Disabled'}
+                                id="toggle"
+                                bind:value={enabled} />
+                        </FormList>
+                        <p>Created: {toLocaleDateTime($bucket.$createdAt)}</p>
+                        <p>Last Updated: {toLocaleDateTime($bucket.$updatedAt)}</p>
+                    </div>
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
@@ -228,14 +231,14 @@
             <CardGrid>
                 <Heading tag="h6" size="7">Update Name</Heading>
                 <svelte:fragment slot="aside">
-                    <ul>
+                    <FormList>
                         <InputText
                             id="name"
                             label="Name"
                             placeholder="Enter name"
                             autocomplete={false}
                             bind:value={bucketName} />
-                    </ul>
+                    </FormList>
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
@@ -296,7 +299,7 @@
                     and <b>Antivirus scanning.</b>
                 </p>
                 <svelte:fragment slot="aside">
-                    <ul class="form-list">
+                    <FormList>
                         <li class="form-item">
                             <label class="choice-item" for="encryption">
                                 <div class="input-text-wrapper">
@@ -345,7 +348,7 @@
                         </li>
 
                         <li />
-                    </ul>
+                    </FormList>
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">