Style level 9

apps/kitchensink/auth.html

@@ -18,7 +18,7 @@
     >
       <ul class="toaster-list s-9NkT8-ZB_aEl">
         <li class="alert-sticky is-success">
-          <button class="x-button" aria-label="close alert">
+          <button class="button is-text is-only-icon" style="--button-size:1.5rem;" aria-label="close alert">
             <span class="icon-x" aria-hidden="true"></span>
           </button>
           <div class="alert-sticky-image">
@@ -76,12 +76,24 @@ <h1 class="heading-level-4">Users</h1>
             <section class="common-section">
               <article class="card common-section">
                 <div class="common-section grid-1-2">
-                  <div class="grid-1-2-col-1">
+                  <div class="u-flex-vertical u-gap-16">
                     <h2 class="heading-level-7">Auth Methods</h2>
                     <p>Enable the auth methods you wish to use.</p>
                   </div>
                   <div class="grid-1-2-col-2">
-                    <form class="form">
+
+                    <div class="u-flex u-padding-block-8 u-sep-block-end">
+                      <ul class="buttons-list u-margin-inline-start-auto">
+                        <li class="buttons-list-item">
+                          <button class="button is-text"><span class="text">Enable all</span></button>
+                        </li>
+                        <li class="buttons-list-item">
+                          <button class="button is-text u-padding-inline-end-0"><span class="text">Disable all</span></button>
+                        </li>
+                      </ul>
+                    </div>
+
+                    <form class="form u-padding-block-start-20">
                       <ul class="form-list is-multiple">
                         <li class="form-item">
                           <label class="choice-item">
@@ -527,8 +539,8 @@ <h2 class="heading-level-6 common-section">OAuth2 Providers</h2>
 
           </div>
         </div>
+        <footer class="main-footer"></footer>
       </section>
-      <footer class="main-footer"></footer>
     </main>
     <script type="module" src="/main.js"></script>
   </body>

apps/kitchensink/auth2.html

@@ -518,8 +518,8 @@ <h4 class="modal-title">Apple OAuth2 Settings</h4>
    </ul>
 </form>
 </div>
+        <footer class="main-footer"></footer>
       </section>
-      <footer class="main-footer"></footer>
     </main>
     <script type="module" src="/main.js"></script>
   </body>

apps/kitchensink/cover-frame.html

@@ -236,15 +236,14 @@ <h6 class="u-bold">Eldad Test</h6>
                 </section>
             </div>
         </div>
-
+        <footer class="main-footer"></footer>
     </section>
-    <footer class="main-footer"></footer>
 </main>
 
 
 <section class="cover-frame">
     <header class="cover-frame-header u-flex u-gap-16 u-main-space-between u-cross-center">
-        <h1 class="body-text-1">Function ID: 0123456789012abcdefg</h1>
+        <h1 class="body-text-1 u-bold">Function ID: 0123456789012abcdefg</h1>
         <button class="x-button" aria-label="close popup">
             <span class="icon-x" aria-hidden="true"></span>
         </button>
@@ -255,7 +254,7 @@ <h1 class="body-text-1">Function ID: 0123456789012abcdefg</h1>
                 <img height="28" width="28" src="/images/icons/color/chrome.svg" alt="Chrome">
             </div>
             <div>
-                <h2 class="body-text-2">Deployment ID: 0123456789012</h2>
+                <h2 class="body-text-2 u-bold">Deployment ID: 0123456789012</h2>
                 <time class="u-block">Created at: 08 Jul 2022, 07:00</time>
                 <div>Size 555KB</div>
             </div>

apps/kitchensink/dashboard.html

@@ -38,7 +38,7 @@ <h1 class="heading-level-4 s-dFvp3V-Iy6FY">
                     <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
                         <div class="u-flex u-gap-16 u-main-space-between">
                             <div>
-                                <div class="heading-level-4">1.19 <span class="body-text-2">GB</span></div>
+                                <div class="heading-level-4">1.19 <span class="body-text-2 u-bold">GB</span></div>
                                 <div>Bandwidth</div>
                             </div>
                             <div class="drop-wrapper u-cross-child-start">
@@ -136,7 +136,7 @@ <h1 class="heading-level-4 s-dFvp3V-Iy6FY">
                             </div>
 
                             <div class="grid-item-1-end-start">
-                                <div class="heading-level-4">8.0 <span class="body-text-2">MB</span></div>
+                                <div class="heading-level-4">8.0 <span class="body-text-2 u-bold">MB</span></div>
                                 <div>Users</div>
                             </div>
 

apps/kitchensink/empty-state-cards.html

@@ -58,7 +58,7 @@ <h1 class="heading-level-4">Users</h1>
 
                         <div class="u-text-center">
                             <h4 class="heading-level-7">Create your first [object] to get started</h4>
-                            <p class="body-text-2 u-margin-block-start-4">Need a hand? Check out our documentation.</p>
+                            <p class="body-text-2 u-bold u-margin-block-start-4">Need a hand? Check out our documentation.</p>
                         </div>
                         <div class="u-flex u-gap-16">
                             <button class="button is-text"><span class="text">Documentation</span></button>
@@ -106,8 +106,8 @@ <h4 class="">You have no [files / users/ buckets / etc.]. Create a [file / etc.]
                 </section>
             </div>
         </div>
+        <footer class="main-footer"></footer>
     </section>
-    <footer class="main-footer"></footer>
 </main>
 <script type="module" src="/main.js"></script>
 </body>

apps/kitchensink/filters.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>@appwrite/kitchensink - user demo</title>
+  </head>
+
+  <body>
+    <main class="grid-with-side" id="main">
+
+      {{> topNav}} {{> sideNav}}
+      <section class="main-content">
+        <div class="top-cover">
+          <div class="container">
+            <div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20">
+              <h1 class="heading-level-4 u-flex u-min-width-0">
+                <a class="button is-text is-only-icon" href="" aria-label="back to [PAGE NAME]">
+                  <span class="icon-cheveron-left" aria-hidden="true"></span>
+                </a>
+                <span class="text u-trim-1">Movie</span>
+              </h1>
+              <div class="interactive-text-output is-buttons-on-top u-max-width-250">
+                <span class="text u-trim">637a40ba7a703e3936e2</span>
+              </div>
+
+            </div>
+            <div class="top-cover-options">
+
+            </div>
+            <div class="tabs">
+              <button
+                class="tabs-button-scroll is-start"
+                aria-label="Show items in start side"
+              >
+                <span class="icon-cheveron-left" aria-hidden="true"></span>
+              </button>
+              <button
+                class="tabs-button-scroll is-end"
+                aria-label="Show items in end side"
+              >
+                <span class="icon-cheveron-right" aria-hidden="true"></span>
+              </button>
+              <ul class="tabs-list">
+                <li class="tabs-item">
+                  <a class="tabs-button" href="">
+                    <span class="text">Attribute</span>
+                  </a>
+                </li>
+                <li class="tabs-item">
+                  <a class="tabs-button" href="">
+                    <span class="text">Indexes</span>
+                  </a>
+                </li>
+                <li class="tabs-item">
+                  <a class="tabs-button is-selected" href="">
+                    <span class="text">Documents</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="container u-margin-block-start-24">
+
+          <div class="common-section">
+            <h2 class="heading-level-5 u-trim-1">Documents</h2>
+          </div>
+          <div class="common-section u-flex u-gap-12">
+            <div class="u-flex-basis-50-percent">
+
+              <div class="drop-wrapper">
+                <button class="button is-secondary" onclick="document.getElementById('dialog').showModal();">
+                  <span class="icon-filter" aria-hidden="true"></span>
+                  <span class="is-not-mobile">Filters</span>
+                </button>
+
+                <div class="drop is-block-end u-width-600 is-modal-screen-mobile" id="dialog">
+                  <header class="drop-header-mobile is-only-mobile u-flex u-main-space-between">
+                    <h5 class="heading-level-6">Filters</h5>
+                    <button class="button is-text is-only-icon" aria-label="close filter modal">
+                      <span class="icon-x" aria-hidden="true"></span>
+                    </button>
+                  </header>
+                  <div class="u-padding-16">
+                    <p>Apply filter rules to refine the table view</p>
+                    <div class="u-flex u-flex-wrap u-gap-8 u-margin-block-start-16">
+                      <div class="select u-stretch u-flex-basis-250">
+                        <select name="pets" id="pet-select" aria-label="Select filter Pets">
+                          <option value="">Select Pets</option>
+                          <option value="1">Option 1</option>
+                          <option value="2">Option 2</option>
+                          <option value="3">Option 3</option>
+                          <option value="4">Option 4</option>
+                          <option value="5">Option 5</option>
+                          <option value="6">Option 6</option>
+                        </select>
+                        <span class="icon-cheveron-down" aria-hidden="true"></span>
+                      </div>
+                      <div class="select u-stretch u-flex-basis-250">
+                        <select name="dog" id="dog-select" aria-label="Select filter Dogs">
+                          <option value="">Select Dog</option>
+                          <option value="1">Option 1</option>
+                          <option value="2">Option 2</option>
+                          <option value="3">Option 3</option>
+                          <option value="4">Option 4</option>
+                          <option value="5">Option 5</option>
+                          <option value="6">Option 6</option>
+                        </select>
+                        <span class="icon-cheveron-down" aria-hidden="true"></span>
+                      </div>
+                      <div class="input-text-wrapper u-stretch u-flex-basis-500">
+                        <input type="text" class="input-text" placeholder="Placeholder" aria-label="Fill pet name" />
+                      </div>
+                      <button class="button is-text u-padding-inline-start-0">
+                        <span class="icon-plus" aria-hidden="true"></span>
+                        <span class="text">Add filter</span>
+                      </button>
+
+                      <div class="u-flex u-flex-wrap u-gap-8 u-stretch u-flex-basis-500 u-margin-block-start-8">
+                        <button class="tag u-x-small" aria-label="delete">
+                          <span class="text">
+                            <b>title</b> starts with Avengers
+                          </span>
+                          <span class="icon-x" aria-hidden="false"></span>
+                        </button>
+                        <button class="tag u-x-small" aria-label="delete">
+                          <span class="text">
+                            <b>id</b> equal to <b>1</b>
+                          </span>
+                          <span class="icon-x" aria-hidden="false"></span>
+                        </button>
+                        <button class="tag u-x-small" aria-label="delete">
+                          <span class="text">
+                            <b>year</b> greater than or equal to <b>2018</b>
+                          </span>
+                          <span class="icon-x" aria-hidden="false"></span>
+                        </button>
+                      </div>
+
+                    </div>
+                  </div>
+
+                  <div class="drop-footer u-flex u-main-end u-gap-8 u-padding-16 u-sep-block-start" style="--inset-block-end:0;">
+                    <button class="button is-text">
+                      <span class="text">Clear all</span>
+                    </button>
+                    <button class="button">
+                      <span class="text">Apply</span>
+                    </button>
+                  </div>
+
+
+                </div>
+              </div>
+
+            </div>
+            <div class="u-flex u-gap-16 u-margin-inline-start-auto">
+              <button class="button is-secondary">
+                <span class="icon-view-boards" aria-hidden="true"></span>
+                <span class="is-not-mobile">Columns</span>
+                <span class="inline-tag">5</span>
+              </button>
+              <button class="button" type="button">
+                <span class="icon-plus" aria-hidden="true"></span>
+                <span class="text">Create <span class="is-not-mobile">Document</span></span>
+              </button>
+            </div>
+          </div>
+
+        </div>
+        <footer class="main-footer">
+          <div class="main-footer-start">
+            <ul class="inline-links is-no-padding-first-and-last u-x-small">
+              <li class="inline-links-item">
+                <a href=""><span class="text">version 1.1.1</span></a>
+              </li>
+              <li class="inline-links-item">
+                <a href=""><span class="text">Terms</span></a>
+              </li>
+              <li class="inline-links-item">
+                <a href=""><span class="text">Privacy</span></a>
+              </li>
+            </ul>
+          </div>
+          <div class="main-footer-end">
+            <ul class="inline-links is-no-padding-first-and-last u-x-small">
+              <li class="inline-links-item">
+                <span class="text">ⓒ 2022 Appwrite. All rights reserved.</span>
+              </li>
+              <li class="inline-links-item u-flex u-gap-8">
+                <a href=""><span class="icon-github" aria-hidden="true" aria-label="Appwrite on Github"></span></a>
+                <a href=""><span class="icon-discord" aria-hidden="true" aria-label="Appwrite on Discord"></span></a>
+              </li>
+            </ul>
+          </div>
+        </footer>
+      </section>
+    </main>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>