Fixed some style issues

app/config/locale/en.php

@@ -251,12 +251,16 @@ return [
     'console.database.title' => 'Database',
 
     'console.storage.title' => 'Storage',
-
+    
     'console.users.title' => 'Users',
     'console.users.section.users.title' => 'Users',
     'console.users.section.teams.title' => 'Teams',
     'console.users.section.providers.title' => 'Providers',
     'console.users.section.templates.title' => 'Templates',
+    
+    'console.webhooks.title' => 'Webhooks',
+    'console.keys.title' => 'API Keys',
+    'console.tasks.title' => 'Tasks',
 
     // Service - Users
     'auth.emails.team' => '%s Team',

app/controllers/account.php

@@ -85,7 +85,7 @@ $utopia->get('/v1/account/sessions')
     ->action(
         function() use ($response, $user) {
             $tokens     = $user->getAttribute('tokens', []);
-            $reader     = new Reader(__DIR__ . '/../app/db/GeoLite2/GeoLite2-Country.mmdb');
+            $reader     = new Reader(__DIR__ . '/../db/GeoLite2/GeoLite2-Country.mmdb');
             $sessions   = [];
             $current    = Auth::tokenVerify($tokens, Auth::TOKEN_TYPE_LOGIN, Auth::$secret);
             $index      = 0;
@@ -165,7 +165,7 @@ $utopia->get('/v1/account/security')
                 'account.update.password',
             ]);
 
-            $reader     = new Reader(__DIR__ . '/../app/db/GeoLite2/GeoLite2-Country.mmdb');
+            $reader     = new Reader(__DIR__ . '/../db/GeoLite2/GeoLite2-Country.mmdb');
             $output     = [];
 
             foreach($logs as $i => &$log) {

app/controllers/locale.php

@@ -17,7 +17,7 @@ $utopia->get('/v1/locale')
         {
             $eu         = include __DIR__ . '/../config/eu.php';
             $currencies = include __DIR__ . '/../config/currencies.php';
-            $reader     = new Reader(__DIR__ . '/../app/db/GeoLite2/GeoLite2-Country.mmdb');
+            $reader     = new Reader(__DIR__ . '/../db/GeoLite2/GeoLite2-Country.mmdb');
             $output     = [];
             $ip         = $request->getIP();
             $time       = (60 * 60 * 24 * 45); // 45 days cache

app/controllers/users.php

@@ -170,7 +170,7 @@ $utopia->get('/v1/users/:userId/sessions')
             }
 
             $tokens     = $user->getAttribute('tokens', []);
-            $reader     = new Reader(__DIR__ . '/../app/db/GeoLite2/GeoLite2-Country.mmdb');
+            $reader     = new Reader(__DIR__ . '/../db/GeoLite2/GeoLite2-Country.mmdb');
             $sessions   = [];
             $index      = 0;
             $countries  = Locale::getText('countries');
@@ -239,7 +239,7 @@ $utopia->get('/v1/users/:userId/logs')
 
             $logs = $au->getLogsByUser($user->getUid(), $user->getAttribute('type', 0));
 
-            $reader     = new Reader(__DIR__ . '/../app/db/GeoLite2/GeoLite2-Country.mmdb');
+            $reader     = new Reader(__DIR__ . '/../db/GeoLite2/GeoLite2-Country.mmdb');
             $output     = [];
 
             foreach($logs as $i => &$log) {

app/views/console/comps/header.phtml

@@ -37,7 +37,7 @@
             <img src="/images/appwrite-nav.svg" alt="Appwrite Logo" />
         </a>
 
-        <div data-ui-highlight class="project-only">
+        <div data-ui-highlight class="project-only container">
 
             <ul class="links">
                 <li>
@@ -93,13 +93,13 @@
                     </a>
                 </li>
             </ul>
-
-            <ul class="links bottom project-only">
-                <li>
-                    <a data-ls-attrs="href=/console/settings?project={{console-project.$uid}}"><i class="icon-cog"></i> Settings</a>
-                </li>
-            </ul>
         </div>
+
+        <ul class="links bottom project-only">
+            <li>
+                <a data-ls-attrs="href=/console/settings?project={{console-project.$uid}}"><i class="icon-cog"></i> Settings</a>
+            </li>
+        </ul>
     </nav>
 </header>
 

app/views/console/home/index.phtml

@@ -28,7 +28,7 @@ $graph = $this->getParam('graph', false);
              data-error="render"
              data-success-triggers="usage.load">
 
-            <?php if($graph): ?>
+            <?php if(!$graph): ?>
                 <div class="row responsive">
                     <div class="col span-9">
                         <div class="pull-start margin-end">
@@ -129,7 +129,7 @@ $graph = $this->getParam('graph', false);
         </div>
     </div>
 
-    <a data-ls-attrs="href=/console/settings/keys?project={{router.params.project}}" class="pull-end">Manage Your API Keys</a>
+    <a data-ls-attrs="href=/console/keys?project={{router.params.project}}" class="pull-end">Manage Your API Keys</a>
 
     <div class="drop-list pull-start" data-ls-ui-open="" data-button-text="Add Platform" data-button-class="button" tabindex="1">
         <ul>

app/views/console/keys/index.phtml

@@ -26,12 +26,15 @@ $scopes = [ // TODO sync with project list
     //'health.read',
 ];
 ?>
-<h2><?php echo Locale::getText('console.settings.section.keys.title'); ?></h2>
+<div class="cover margin-bottom-large">
-
+    <h1 class="zone xl margin-bottom-large margin-top">
+        <?php echo Locale::getText('console.keys.title'); ?>
+    </h1>
+</div>
 <div class="zone xl" data-service="projects.keys.list" data-scope="console" data-event="load" data-name="console-keys" data-param-project-id="{{router.params.project}}" data-success="render,trigger" data-success-rerender="key.new,key.update,key.delete" data-success-triggers="project.load" data-error="render" data-error-rerender="">
 
     <div data-ls-if="0 == {{console-keys.length}} || undefined == {{console-keys.length}}" class="box margin-top margin-bottom" style="display: none;">
-        <h3>No API Keys Found</h3>
+        <h3 class="margin-bottom-small">No API Keys Found</h3>
 
         <p class="margin-bottom-no">You haven't created any API keys for your project yet.</p>
     </div>

app/views/console/settings/index.phtml

@@ -10,32 +10,14 @@ use Utopia\Locale\Locale;
     </h1>
 </div>
 
-<div class="zone xl"
+<div class="zone xl" data-service="projects.get" data-scope="console" data-name="console-project" data-event="load" data-param-project-id="{{router.params.project}}" data-success="render,trigger" data-error="render" data-success-rerender="" data-error-rerender="" data-success-triggers="project.load">
-     data-service="projects.get"
-     data-scope="console"
-     data-name="console-project"
-     data-event="load"
-     data-param-project-id="{{router.params.project}}"
-     data-success="render,trigger"
-     data-error="render"
-     data-success-rerender=""
-     data-error-rerender=""
-     data-success-triggers="project.load">
 
     <div class="zone xl">
         <ul class="phases clear" data-ui-phases data-selected="{{router.params.tab}}">
             <li data-state="/console/settings?project={{router.params.project}}">
                 <h2><?php echo Locale::getText('console.settings.section.overview.title'); ?></h2>
 
-                <form data-service="projects.update"
+                <form data-service="projects.update" data-scope="console" data-event="submit" data-param-project-id="{{router.params.project}}" data-success="alert,trigger" data-success-alert="Saved project successfully" data-success-triggers="project.update" data-error="alert" data-error-alert="Failed to update project">
-                      data-scope="console"
-                      data-event="submit"
-                      data-param-project-id="{{router.params.project}}"
-                      data-success="alert,trigger"
-                      data-success-alert="Saved project successfully"
-                      data-success-triggers="project.update"
-                      data-error="alert"
-                      data-error-alert="Failed to update project">
 
                     <input name="$uid" type="hidden" data-ls-bind="{{console-project.$uid}}" />
 
@@ -126,42 +108,57 @@ use Utopia\Locale\Locale;
                         <div class="col span-3 box-aside">
                             <label for="name">Logo</label>
                             <div class="text-center clear">
-                                <input type="hidden" name="logo" data-ls-bind="{{console-project.logo}}"
+                                <input type="hidden" name="logo" data-ls-bind="{{console-project.logo}}" data-read="<?php echo $this->escape(json_encode(['*'])); ?>" data-write="<?php echo $this->escape(json_encode(['team:{{console-project.teamId}}'])); ?>" data-accept="image/*" data-forms-upload="" data-scope="console" data-default="">
-                                       data-read="<?php echo $this->escape(json_encode(['*'])); ?>"
-                                       data-write="<?php echo $this->escape(json_encode(['team:{{console-project.teamId}}'])); ?>"
-                                       data-accept="image/*"
-                                       data-forms-upload="" data-scope="console" data-default="">
                             </div>
                         </div>
                     </div>
                 </form>
             </li>
+            <li data-state="/console/privacy?project={{router.params.project}}">
+
+                <form data-service="projects.update" data-scope="console" data-event="submit" data-param-project-id="{{router.params.project}}" data-success="alert,trigger" data-success-alert="Saved project successfully" data-success-triggers="project.update" data-error="alert" data-error-alert="Failed to update project">
+                    <h2>Privacy & Legal</h2>
+
+                    <div class="box margin-bottom">
+                        <input name="$uid" type="hidden" data-ls-bind="{{console-project.$uid}}" />
+
+                        <div class="row thin">
+                            <div class="col span-6">
+                                <label for="legalName">Legal Name</label>
+                                <input name="legalName" id="legalName" type="text" autocomplete="off" data-ls-bind="{{console-project.legalName}}" data-forms-text-direction>
+
+                                <label for="legalCountry">Country</label>
+                                <select id="legalCountry" name="legalCountry" data-ls-options="{{geo-countries}}" data-ls-bind="{{console-project.legalCountry}}"></select>
+
+                                <label for="legalCity">City</label>
+                                <input name="legalCity" id="legalCity" type="text" autocomplete="off" data-ls-bind="{{console-project.legalCity}}" data-forms-text-direction>
+                            </div>
+
+                            <div class="col span-6">
+                                <label for="legalTaxId">Tax ID</label>
+                                <input name="legalTaxId" id="legalTaxId" type="text" autocomplete="off" data-ls-bind="{{console-project.legalTaxId}}" data-forms-text-direction>
+
+                                <label for="legalState">State</label>
+                                <input name="legalState" id="legalState" type="text" autocomplete="off" data-ls-bind="{{console-project.legalState}}" data-forms-text-direction>
+
+                                <label for="legalAddress">Address</label>
+                                <input name="legalAddress" id="legalAddress" type="text" autocomplete="off" data-ls-bind="{{console-project.legalAddress}}" data-forms-text-direction>
+                            </div>
+                        </div>
+
+                        <button class="" type="submit">Save</button>
+                    </div>
+                </form>
+            </li>
             <li data-state="/console/settings/members?project={{router.params.project}}">
                 <h2><?php echo Locale::getText('console.settings.section.members.title'); ?></h2>
 
-                <div class="zone xl"
+                <div class="zone xl" data-service="teams.getMembers" data-scope="console" data-event="load,auth.invite,auth.leave" data-name="members" data-param-team-id="{{console-project.teamId}}" data-success="render,trigger" data-success-triggers="members.load" data-error="render" data-error-rerender="">
-                     data-service="teams.getMembers"
-                     data-scope="console"
-                     data-event="load,auth.invite,auth.leave"
-                     data-name="members"
-                     data-param-team-id="{{console-project.teamId}}"
-                     data-success="render,trigger"
-                     data-success-triggers="members.load"
-                     data-error="render"
-                     data-error-rerender="">
 
                     <div class="box margin-bottom">
                         <ul data-ls-loop="members" data-ls-as="member" class="list">
                             <li class="clear">
-                                <form class="pull-end"
+                                <form class="pull-end" data-service="auth.leave" data-scope="console" data-event="submit" data-success="alert,trigger" data-success-alert="<?php echo Locale::getText('console.settings.section.members.leave.success'); ?>" data-success-triggers="auth.leave,project.update" data-error="alert" data-error-alert="<?php echo Locale::getText('console.settings.section.members.leave.failure'); ?>">
-                                      data-service="auth.leave"
-                                      data-scope="console"
-                                      data-event="submit"
-                                      data-success="alert,trigger"
-                                      data-success-alert="<?php echo Locale::getText('console.settings.section.members.leave.success'); ?>"
-                                      data-success-triggers="auth.leave,project.update"
-                                      data-error="alert"
-                                      data-error-alert="<?php echo Locale::getText('console.settings.section.members.leave.failure'); ?>">
 
                                     <input name="inviteId" id="inviteId" type="hidden" data-ls-bind="{{member.inviteId}}">
 
@@ -169,15 +166,7 @@ use Utopia\Locale\Locale;
                                 </form>
 
                                 <div data-ls-if="false === {{member.confirm}}" class="pull-end margin-end" style="display: none;">
-                                    <form
+                                    <form data-service="auth.inviteResend" data-scope="console" data-event="submit" data-success="alert,trigger" data-success-alert="<?php echo Locale::getText('console.settings.section.members.invite.success'); ?>" data-success-triggers="auth.invite" data-error="alert" data-error-alert="<?php echo Locale::getText('console.settings.section.members.invite.failure'); ?>">
-                                            data-service="auth.inviteResend"
-                                            data-scope="console"
-                                            data-event="submit"
-                                            data-success="alert,trigger"
-                                            data-success-alert="<?php echo Locale::getText('console.settings.section.members.invite.success'); ?>"
-                                            data-success-triggers="auth.invite"
-                                            data-error="alert"
-                                            data-error-alert="<?php echo Locale::getText('console.settings.section.members.invite.failure'); ?>">
                                         <input name="inviteId" id="inviteId" type="hidden" data-ls-bind="{{member.inviteId}}">
                                         <input name="redirect" type="hidden" data-ls-bind="https://{{env.DOMAIN}}/auth/join?project={{router.params.project}}" />
 
@@ -199,15 +188,7 @@ use Utopia\Locale\Locale;
 
                         <h1><?php echo Locale::getText('console.settings.section.members.labels.invite'); ?></h1>
 
-                        <form name="auth.invite"
+                        <form name="auth.invite" data-service="auth.invite" data-scope="console" data-event="submit" data-success="alert,trigger,reset" data-success-alert="<?php echo Locale::getText('console.settings.section.members.invite.success'); ?>" data-success-triggers="auth.invite,modal-close" data-error="alert" data-error-alert="<?php echo Locale::getText('console.settings.section.members.invite.failure'); ?>">
-                              data-service="auth.invite"
-                              data-scope="console"
-                              data-event="submit"
-                              data-success="alert,trigger,reset"
-                              data-success-alert="<?php echo Locale::getText('console.settings.section.members.invite.success'); ?>"
-                              data-success-triggers="auth.invite,modal-close"
-                              data-error="alert"
-                              data-error-alert="<?php echo Locale::getText('console.settings.section.members.invite.failure'); ?>">
 
                             <input name="team" id="team" type="hidden" data-ls-bind="{{console-project.teamId}}">
                             <input name="redirect" type="hidden" data-ls-bind="https://{{env.DOMAIN}}/auth/join?project={{router.params.project}}" />

app/views/console/tasks/index.phtml

@@ -3,12 +3,15 @@
 use Utopia\Locale\Locale;
 
 ?>
-<h2><?php echo Locale::getText('console.settings.section.tasks.title'); ?></h2>
+<div class="cover margin-bottom-large">
-
+    <h1 class="zone xl margin-bottom-large margin-top">
+        <?php echo Locale::getText('console.tasks.title'); ?>
+    </h1>
+</div>
 <div class="zone xl" data-service="projects.tasks.list" data-scope="console" data-event="load" data-name="console-tasks" data-param-project-id="{{router.params.project}}" data-success="render,trigger" data-success-rerender="task.new,task.update,task.delete" data-success-triggers="project.load" data-error="render" data-error-rerender="">
 
     <div data-ls-if="0 === {{console-tasks.length}} || undefined === {{console-tasks.length}}" class="box margin-top margin-bottom" style="display: none;">
-        <h3>No Tasks Found</h3>
+        <h3 class="margin-bottom-small">No Tasks Found</h3>
 
         <p class="margin-bottom-no">You haven't created any tasks for your project yet.</p>
     </div>

app/views/console/webhooks/index.phtml

@@ -16,12 +16,16 @@ $events = [
 ];
 
 ?>
-<h2><?php echo Locale::getText('console.settings.section.webhooks.title'); ?></h2>
+<div class="cover margin-bottom-large">
+    <h1 class="zone xl margin-bottom-large margin-top">
+        <?php echo Locale::getText('console.webhooks.title'); ?>
+    </h1>
+</div>
 
 <div class="zone xl" data-service="projects.webhooks.list" data-scope="console" data-event="load" data-name="console-webhooks" data-param-project-id="{{router.params.project}}" data-success="render,trigger" data-success-rerender="webhook.new,webhook.update,webhook.delete" data-success-triggers="project.load" data-error="render" data-error-rerender="">
 
     <div data-ls-if="0 == {{console-webhooks.length}} || undefined == {{console-webhooks.length}}" class="box margin-top margin-bottom" style="display: none;">
-        <h3>No Webhooks Found</h3>
+        <h3 class="margin-bottom-small">No Webhooks Found</h3>
 
         <p class="margin-bottom-no">You haven't created any webhooks for your project yet.</p>
     </div>

public/styles/comps/cover.less

@@ -3,14 +3,20 @@
   padding: 30px 50px;
   margin: 0 -50px;
   position: relative;
+  border-bottom: solid 1px #ececec;
 
-  h1, h2, h3, h4, .title {
+  h1,
+  h2,
+  h3,
+  h4,
+  .title {
     color: @config-color-focus;
     font-weight: 600;
+    margin-bottom: 30px !important;
   }
 
   i:before {
-    margin: 0!important;
+    margin: 0 !important;
   }
 
   p {
@@ -21,7 +27,8 @@
     color: #ffffff;
   }
 
-  a, .link {
+  a,
+  .link {
     color: @config-color-focus;
     border-left: none;
     border-right: none;
@@ -31,4 +38,4 @@
       border-bottom-color: @config-color-focus;
     }
   }
-}
+}

public/styles/comps/header.less

@@ -77,7 +77,7 @@ header {
       display: block;
       border: none;
       margin: 18px 10px 50px 10px;
-      
+
       img {
         display: block;
       }
@@ -90,7 +90,7 @@ header {
         }
       }
     }
-
+    
     .links a {
       padding: 0;
       border: none;

public/styles/default.less

@@ -72,7 +72,7 @@ body {
 }
 
 main {
-  min-height: 450px;
+  min-height: 950px;
 }
 
 ul {

public/styles/scopes/console.less

@@ -18,12 +18,12 @@
     background: #f6f9fc;
 
     .project-only {
-      display: none!important;
+      display: none !important;
     }
 
     &.show-nav {
       .project-only {
-        display: block!important;
+        display: block !important;
       }
     }
 
@@ -64,10 +64,6 @@
       z-index: 1000;
       .func-border-start(220px, #132a3b);
     }
-
-    &:after {
-
-    }
   }
 
   header {
@@ -78,7 +74,7 @@
     line-height: 40px;
     padding: 15px 30px;
     background: #fff;
-    box-shadow: 0 0 2px rgba(0, 0, 0, .25);
+    box-shadow: 0 0 2px rgba(0, 0, 0, .05);
     margin: 0 -50px;
     z-index: 2;
     font-size: 14px;
@@ -140,10 +136,10 @@
     }
 
     nav {
-      box-shadow: 0 0 2px rgba(0, 0, 0, .25);
+      //box-shadow: 0 0 2px rgba(0, 0, 0, .05);
       background: #1b3445;
       background: linear-gradient(rgb(19, 42, 59), rgb(48, 40, 57));
-      background: linear-gradient(#143650,#302839);
+      background: linear-gradient(#143650, #302839);
       color: #788c99;
       position: fixed;
       height: 100%;
@@ -190,6 +186,11 @@
         }
       }
 
+      .container {
+        overflow: scroll;
+        height: ~"calc(100% - 133px)";
+      }
+
       .project-box {
         padding: 20px;
         text-align: center;
@@ -265,7 +266,7 @@
         &.top {
           border: none;
           padding-bottom: 0;
-          margin-bottom: 5px!important;
+          margin-bottom: 5px !important;
         }
 
         &.bottom {
@@ -276,7 +277,7 @@
           //background: #183142;
           padding-bottom: 0;
           border: none;
-          margin-bottom: 0!important;
+          margin-bottom: 0 !important;
 
           a {
             border-bottom: none;
@@ -321,7 +322,8 @@
             display: inline-block;
           }
 
-          &:hover, &.selected {
+          &:hover,
+          &.selected {
             color: #e4e4e4;
             font-weight: 500;
             //background: #142a3a;
@@ -342,7 +344,7 @@
     }
   }
 
-  > footer {
+  >footer {
     width: ~"calc(100% + 100px)";
     margin: 0 -50px;
     box-sizing: border-box;
@@ -360,7 +362,8 @@
       margin-bottom: 50px;
       width: 270px;
 
-      &:nth-child(3n), &.new {
+      &:nth-child(3n),
+      &.new {
         .func-margin-end(0);
       }
     }
@@ -395,7 +398,7 @@
       &:after {
         content: "";
         display: block;
-        width: 3px;
+        width: 2px;
         background: #f6f7f8;
         height: ~"calc(100% + 100px)";
         position: absolute;
@@ -403,7 +406,8 @@
         bottom: -20px;
         .func-end(24px);
 
-        @media @phones, @tablets {
+        @media @phones,
+        @tablets {
           width: ~"calc(100% + 40px)";
           height: 3px;
           position: static;
@@ -470,14 +474,14 @@
       //padding-top: 15px;
       background-color: #ffffff;
       background-image:
-              linear-gradient(transparent 1px, transparent 1px),
+        linear-gradient(transparent 1px, transparent 1px),
-              linear-gradient(90deg, transparent 1px, transparent 1px),
+        linear-gradient(90deg, transparent 1px, transparent 1px),
-              linear-gradient(rgb(241,241,241) 1px, transparent 1px),
+        linear-gradient(rgb(241, 241, 241) 1px, transparent 1px),
-              linear-gradient(90deg, rgb(241,241,241) 1px, transparent 1px);
+        linear-gradient(90deg, rgb(241, 241, 241) 1px, transparent 1px);
       background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
       background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
       background-repeat: round;
-      border: solid 1px rgb(241,241,241);
+      border: solid 1px rgb(241, 241, 241);
       border-right: solid 1px transparent;
       border-bottom: solid 1px transparent;
 
@@ -576,7 +580,7 @@
 
     &.instagram {
       color: #ffffff;
-      background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
+      background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
     }
   }
 
@@ -688,7 +692,7 @@
 .development {
   .dev-feature {
     display: block;
-    opacity: .6!important;
+    opacity: .6 !important;
     outline: solid yellow 3px;
     outline-offset: 3px;