From 125b609b98ddda25c851627246659ab356bb7b9e Mon Sep 17 00:00:00 2001
From: bhomie <hi@briansander.com>
Date: Wed, 10 Jun 2020 01:32:25 -0700
Subject: [PATCH] initial layout

---
 public/css/style.scss | 22 ++++++++++++++++++++++
 public/index.html     | 10 ++++++++++
 2 files changed, 32 insertions(+)

diff --git a/public/css/style.scss b/public/css/style.scss
index 1f59e6fcb..c70021769 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -1404,8 +1404,30 @@ key {
     &.themes, &.languages, &.layouts{
       grid-template-columns: 1fr;
       grid-template-areas: "title"
+                            "tabs"
                             "buttons";
       gap: .5rem;
+      .tabs {
+        grid-area: tabs;
+        display: flex;
+        grid-template-columns: 1fr 1fr 9fr;
+        .tab {
+          outline: 0;
+          cursor: pointer;
+          padding: 0;
+          font-size: 1rem;
+          color: var(--sub-color);
+          text-align: left;
+          border: 0;
+          background: 0;
+          &:first-child{
+            margin-right: .5rem;
+          }
+          &.active {
+            color: var(--main-color);
+          }
+        }
+      }
       .buttons{
         margin-left: 0;
         grid-auto-flow: dense;
diff --git a/public/index.html b/public/index.html
index 2cea40e85..151a770ba 100644
--- a/public/index.html
+++ b/public/index.html
@@ -421,9 +421,19 @@
           </div>
         </div>
         <div class="section themes">
+          <div class='tabs'>
+            <button class="tab">preset</button>
+            <button class="tab">custom</button>
+            <div class="activeIndicator"></div>
+          </div>
           <h1>theme</h1>
           <div class="buttons">
           </div>
+          <div class="customTheme">
+            <p>enter the values for your own custom theme here</p>
+            <input class="colorSelector" type="color">
+
+          </div>
         </div>