member profile tab styled

redid the css for the member profile tab under settings.

responsive style still need to be addressed, but that will happen after
all tabs have been converted to the new layout

public/assets/css/dash/forms.css

@@ -18,15 +18,15 @@ input[type="text"] {
   border-radius: 5px;
   font: 18px var(--base-type);
   display: inline-block;
-  background: var(--secondary);
+  background: var(--primary);
-  color: var(--primary);
+  color: var(--secondar);
 }
 
 textarea {
   border: 0;
   border-radius: 3px;
-  color: var(--primary);
+  color: var(--secondary);
-  background: var(--secondary);
+  background: var(--primary);
 }
 
 button,

public/assets/css/dash/settings.css

@@ -10,10 +10,10 @@ article[class="settings"] h1 {
 }
 
 article[class="settings"] label {
-  color: var(--secondary);
+  color: var(--primary);
   margin-bottom: 10px;
   display: inline-block;
-  font-weight: 400;
+  font-weight: bold;
 }
 
 article.settings div.tab-toolbar button {
@@ -25,7 +25,7 @@ article.settings div.tab-toolbar button {
 article.settings section.settings-tabs section.section-tab {
   width: 100%;
   min-height: 400px;
-  background: var(--secondary-highlight);
+  background: var(--secondary);
   color: var(--secondary);
 }
 
@@ -35,36 +35,42 @@ article.settings section.settings-tabs section.section-tab {
 }
 
 .hide {
-  display: none;
+  /* REFACTOR: i know, i know, it's just a placeholder*/
+  display: none !important;
   visibility: hidden;
 }
 
 section#member-profile {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
   grid-auto-columns: auto;
   gap: 15px;
   width: 100%;
   max-width: 900px;
-  margin: 10px auto;
+  margin: 0 auto;
+  border-radius: 3px;
 }
 
 section#member-profile > div:nth-child(1) {
   grid-column: 1/2;
-  grid-row: 1/3;
+  grid-row: 1/2;
+  height: 250px;
 }
 
 section#member-profile > div:nth-child(2) {
   grid-column: 2/4;
-  grid-row: 1/3;
+  grid-row: 1/2;
 }
 
 section#member-profile > div:nth-child(3) {
-  grid-row: 1/3;
+  grid-column: 1/2;
+  grid-row: 2/3;
+  padding-left: 10px;
 }
 
 section#member-profile > div:nth-child(4) {
-  color: var(--white);
+  grid-column: 2/3;
+  grid-row: 2/3;
 }
 
 section#member-profile > div:nth-child(4) a {
@@ -74,22 +80,37 @@ section#member-profile > div:nth-child(4) a {
 }
 
 section#member-profile > div:nth-child(5) {
-  grid-column: 2/4;
+  grid-column: 3/4;
+  grid-row: 2/3;
+  padding-right: 10px;
 }
 
 section#member-profile > div:nth-child(6) {
-  grid-column: 1/3;
-}
-
-section#member-profile > div:nth-child(7) {
-  grid-column: 3/5;
-  min-height: 325px;
-}
-
-section#member-profile > div:nth-child(8) {
   grid-column: 1/4;
-  color: var(--white);
+  grid-row: 3/4;
+  padding: 0 10px;
+}
+
+section#member-profile > div:nth-child(6) div {
+  display: inline-block;
+  color: var(--secondary);
   word-wrap: break-word;
+  vertical-align: top;
+  width: 49.6%;
+}
+
+section#member-profile > div:nth-child(6) div > span {
+  display: block;
+  background: var(--primary);
+  color: var(--secondary);
+  border-radius: 3px;
+  padding: 3px;
+  margin-bottom: 10px;
+}
+
+section#member-profile > div textarea {
+  width: 98.4%;
+  height: 85%;
 }
 
 section#member-profile > div[class="member-avatar"] div,
@@ -109,11 +130,6 @@ section#member-profile div input[type="text"] {
   margin-bottom: 10px;
 }
 
-section[class="member-settings"] div textarea {
-  width: 98.4%;
-  height: 63%;
-}
-
 article[class="settings"] button {
   width: 100%;
   text-align: left;

resources/views/back/settings.blade.php

@@ -23,34 +23,28 @@
                     <input type='text' name='handle' id='settings-handle' placeholder='handle' value="{{ $member['handle'] }}" autofocus/>
                     <input type='text' name='email' id='settings-email' placeholder='email' value="{{ $member['email'] }}" autofocus/>
                     <input type='hidden' name='member-id' id='member-id' value="{{ $member['id'] }}"/>
+                </div>
+                <div>
                     <input type='text' name='base-url' id='settings-url' placeholder='url' value="{{ $baseUrl }}" autofocus/>
                     <input type='text' name='base-title' id='settings-title' placeholder='site title' value="{{ $siteTitle }}" autofocus/>
+                </div>
+                <div>
                     <textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ $desc }}</textarea>
                 </div>
+                <div>
+                    <div>
+                        <label>API KEY</label>
+                        <span>{{ $member['key'] }}</span>
+                    </div>
+                    <div>
+                        <label>FORM TOKEN</label><br/>
+                        <span>{{ $ftoken }}</span>
+                    </div>
+
+                </div>
             </section>
             <section id="member-features" class="section-tab hide">
                 MEMBER FEATURES
-            </section>
-            <section id="member-themes" class="section-tab hide">
-                MEMBER THEMES
-            </section>
-        </section>
-        <section class="member-settings">
-
-            <div>
-                <button id="create-backup">
-                    <svg id="nav-menu-icon" class="icon">
-                        <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-back-in-time"/>
-                    </svg>
-                    <span>CREATE BACKUP</span>
-                </button><br/>
-                @if($lastBackup != '')
-                    LAST BACK UP<br/>
-                    <a href="/api/v1/backup/download">{{ $lastBackup }}</a><br/>
-                @else
-                    <span>span No back ups. Frowny face.</span>
-                @endif
-            </div>
                 <div class="features">
                     @if(isset($apiStatus) && $apiStatus == 'true')
                         <button id="api-access-toggle" title="allow external api" data-enabled="true">
@@ -86,25 +80,19 @@
 
                     @endif
                 </div>
-            <div class="theme">
+                <div>
-                <label>Themes</label><br/>
+                    <button id="create-backup">
-                @foreach($themes as $theme)
-                    @if($theme['name'] == $currentTheme)
-                        <button id="{{ $theme['name'] }}" class="theme-select" data-enabled="true">
                         <svg id="nav-menu-icon" class="icon">
-                                <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
+                            <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-back-in-time"/>
                         </svg>
-                            <span>{{ $theme['display-name'] }}</span>
+                        <span>CREATE BACKUP</span>
-                        </button><a target="_blank" href='/theme'>Edit</a>
+                    </button><br/>
+                    @if($lastBackup != '')
+                        LAST BACK UP<br/>
+                        <a href="/api/v1/backup/download">{{ $lastBackup }}</a><br/>
                     @else
-                        <button href="#" id="{{ $theme['name'] }}" class="theme-select" data-enabled="false">
+                        <span>span No back ups. Frowny face.</span>
-                            <svg id="nav-menu-icon" class="icon">
-                                <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
-                            </svg>
-                            <span>{{ $theme['display-name'] }}</span>
-                        </button>
                     @endif
-                @endforeach
                 </div>
                 <div class="mail">
                     <label>Email</label><br/>
@@ -131,15 +119,31 @@
                         <span>TEST MAIL</span>
                     </button>
                 </div>
-            <div>
+            </section>
-                <label>API KEY</label>
+            <section id="member-themes" class="section-tab hide">
-                <br/>
+                MEMBER THEMES
-                {{ $member['key'] }}
+                <div class="theme">
-                <br/>
+                    <label>Themes</label><br/>
-                <label>FORM TOKEN</label><br/>
+                    @foreach($themes as $theme)
-                {{ $ftoken }}
+                        @if($theme['name'] == $currentTheme)
+                            <button id="{{ $theme['name'] }}" class="theme-select" data-enabled="true">
+                                <svg id="nav-menu-icon" class="icon">
+                                    <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
+                                </svg>
+                                <span>{{ $theme['display-name'] }}</span>
+                            </button><a target="_blank" href='/theme'>Edit</a>
+                        @else
+                            <button href="#" id="{{ $theme['name'] }}" class="theme-select" data-enabled="false">
+                                <svg id="nav-menu-icon" class="icon">
+                                    <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
+                                </svg>
+                                <span>{{ $theme['display-name'] }}</span>
+                            </button>
+                        @endif
+                    @endforeach
                 </div>
             </section>
+        </section>
     </article>
 @endsection
   @section('scripting')