Update styling

Just sort of winging it.
2020-02-26 12:02:20 -06:00 · 2020-02-26 12:02:20 -06:00 · 595ce6f5e3
parent b1760c8d29
commit 595ce6f5e3
11 changed files with 147 additions and 172 deletions
--- a/src/browser/pages/error.css
+++ b/src/browser/pages/error.css
@ -1,20 +1,28 @@
 .error-display {
  box-sizing: border-box;
-  color: #fcfcfc;
  padding: 20px;
  text-align: center;
 }

+.error-display > .header {
+  font-size: 6rem;
+  margin: 0;
+}
+
+.error-display > .body {
+  color: #444;
+  font-size: 1.2rem;
+}
+
 .error-display > .links {
-  margin-top: 1rem;
+  margin-top: 16px;
 }

 .error-display > .links > .link {
-  color: #b6b6b6;
+  color: rgb(87, 114, 245);
  text-decoration: none;
 }

 .error-display > .links > .link:hover {
-  color: #fcfcfc;
  text-decoration: underline;
 }
--- a/src/browser/pages/error.html
+++ b/src/browser/pages/error.html
@ -7,7 +7,7 @@
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <meta http-equiv="Content-Security-Policy" content="style-src 'self'; manifest-src 'self'; img-src 'self' data:;" />
-    <title>code-server {{ERROR_TITLE}}</title>
+    <title>{{ERROR_TITLE}} - code-server</title>
    <link rel="icon" href="{{BASE}}/static-{{COMMIT}}/src/browser/media/favicon.ico" type="image/x-icon" />
    <link
      rel="manifest"
--- a/src/browser/pages/global.css
+++ b/src/browser/pages/global.css
@ -8,22 +8,68 @@ body,

 body {
  background: rgb(244, 247, 252);
-  color: #f4f4f4;
+  color: #111;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  overflow: hidden;
 }

+input,
 button {
  font-family: inherit;
-  font-size: inherit;
+  font-size: 1rem;
+  line-height: 1rem;
+}
+
+.-button {
+  background-color: rgb(87, 114, 245);
+  border-radius: 5px;
+  border: none;
+  box-sizing: border-box;
+  color: white;
+  cursor: pointer;
+  padding: 18px 20px;
+  text-decoration: none;
 }

 .center-container {
  align-items: center;
  box-sizing: border-box;
  display: flex;
+  flex-direction: column;
  justify-content: center;
  padding: 20px;
 }
+
+.card-box {
+  background-color: rgb(250, 253, 258);
+  border-radius: 5px;
+  box-shadow: rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
+  max-width: 650px;
+  width: 100%;
+}
+
+.card-box > .header {
+  border-bottom: 1px solid #ddd;
+  color: #444;
+  padding: 30px;
+}
+
+.card-box > .header > .main {
+  margin: 0;
+  font-size: 1.5rem;
+}
+
+.card-box > .header > .sub {
+  color: #555;
+  margin-top: 10px;
+}
+
+.card-box > .content {
+  padding: 40px;
+}
+
+.card-box + .card-box {
+  margin-top: 26px;
+}
--- a/src/browser/pages/home.css
+++ b/src/browser/pages/home.css
@ -1,28 +1,8 @@
-.info-blocks {
-  max-width: 500px;
-  width: 100%;
-}
-
-.info-block > .header {
-  font-size: 1.3rem;
-  margin: 1.5rem 0;
-}
-
-.info-block > .none {
-  color: #b6b6b6;
-}
-
-.info-block + .info-block {
-  border-top: 1px solid #666;
-  margin-top: 1rem;
-}
-
 .block-row {
  display: flex;
 }

 .block-row > .item {
-  color: #c4c4c4;
  flex: 1;
 }

@ -31,16 +11,17 @@
 }

 .block-row > .item > .sub {
-  color: #888;
+  font-size: 0.95em;
 }

 .block-row .-link {
-  cursor: pointer;
+  color: rgb(87, 114, 245);
+  display: block;
  text-decoration: none;
 }

 .block-row .-link:hover {
-  color: #fafafa;
+  text-decoration: underline;
 }

 .block-row > .item > .icon {
@ -51,8 +32,8 @@
 }

 .block-row > .item > .icon.-missing {
-  background-color: #eee;
-  color: #b6b6b6;
+  background-color: rgb(87, 114, 245);
+  color: #fff;
  text-align: center;
 }

@ -67,16 +48,12 @@
 }

 .kill-form > .kill {
-  background-color: transparent;
+  background-color: rgb(87, 114, 245);
  border: none;
-  color: #b6b6b6;
+  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1rem;
  margin: 0;
  padding: 0;
 }
-
-.kill-form > .kill:hover {
-  color: #fafafa;
-}
--- a/src/browser/pages/home.html
+++ b/src/browser/pages/home.html
@ -20,15 +20,18 @@
  </head>
  <body>
    <div class="center-container">
-      <div class="info-blocks">
-        <!-- TEMP: Only VS Code for now. -->
-        <!-- <div class="info-block"> -->
-        <!--   <h2 class="header">Running Applications</h2> -->
-        <!--   {{APP_LIST:RUNNING}} -->
-        <!-- </div> -->
+      <!-- TEMP: Only VS Code for now. -->
+      <!-- <div class="info-block"> -->
+      <!--   <h2 class="header">Running Applications</h2> -->
+      <!--   {{APP_LIST:RUNNING}} -->
+      <!-- </div> -->

-        <div class="info-block">
-          <h2 class="header">Launch</h2>
+      <div class="card-box">
+        <div class="header">
+          <h2 class="main">Launch</h2>
+          <div class="sub">Choose an application to launch below.</div>
+        </div>
+        <div class="content">
          <div class="block-row">
            <a class="item -link" href="./vscode">
              <img class="icon" src="./static-{{COMMIT}}/lib/vscode/resources/linux/code.png" />
@ -36,22 +39,27 @@
            </a>
          </div>
        </div>
+      </div>

-        <div class="info-block">
-          <h2 class="header">Version</h2>
+      <div class="card-box">
+        <div class="header">
+          <h2 class="main">Version</h2>
+          <div class="sub">Version information and updates.</div>
+        </div>
+        <div class="content">
          {{UPDATE:NAME}}
        </div>
-
-        <!-- <div class="info-block"> -->
-        <!--   <h2 class="header">Editors</h2> -->
-        <!--   {{APP_LIST:EDITORS}} -->
-        <!-- </div> -->
-
-        <!-- <div class="info-block"> -->
-        <!--   <h2 class="header">Other</h2> -->
-        <!--   {{APP_LIST:OTHER}} -->
-        <!-- </div> -->
      </div>
+
+      <!-- <div class="info-block"> -->
+      <!--   <h2 class="header">Editors</h2> -->
+      <!--   {{APP_LIST:EDITORS}} -->
+      <!-- </div> -->
+
+      <!-- <div class="info-block"> -->
+      <!--   <h2 class="header">Other</h2> -->
+      <!--   {{APP_LIST:OTHER}} -->
+      <!-- </div> -->
    </div>
  </body>
 </html>
--- a/src/browser/pages/login.css
+++ b/src/browser/pages/login.css
@ -1,65 +1,33 @@
 body {
  overflow: auto;
 }
-.center-container {
-  width: 100vw;
-  height: 100vh;
-  padding: 20px 40px;
-  min-height: 400px;
-}

 .login-form {
-  border-radius: 5px;
-  box-shadow: rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
-  color: rgba(0, 0, 0, 0.37);
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
-  padding: 20px 40px;
-  position: relative;
-
-  height: 300px;
-  min-width: 320px;
-  max-width: 500px;
-}
-
-.main {
-  font-size: 40px;
-}
-
-.login-form > .header {
-  align-items: center;
-  color: black;
-}
-
-.login-form > .header > .sub {
-  margin-top: 10px;
 }

 .login-form > .field {
-  margin-top: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
-  height: 50px;
 }

 .login-form > .error {
  color: red;
-  margin-top: 1rem;
+  margin-top: 16px;
 }

 .login-form > .field > .password {
-  border: 1px solid #ddd;
-  background: rgb(244, 247, 252);
-  box-sizing: border-box;
-  padding: 1rem;
-  flex: 1;
-  font-size: 20px;
+  background-color: rgb(244, 247, 252);
  border-radius: 5px;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
  color: black;
-  min-width: 100px;
+  flex: 1;
+  padding: 16px;
 }

 .login-form > .user {
@ -67,14 +35,5 @@ body {
 }

 .login-form > .field > .submit {
-  font-size: 20px;
-  border: none;
-  box-sizing: border-box;
  margin-left: 20px;
-
-  background-color: rgb(87, 114, 245);
-  color: white;
-  font-family: monospace;
-  padding: 10px 20px;
-  border-radius: 5px;
 }
--- a/src/browser/pages/login.html
+++ b/src/browser/pages/login.html
@ -22,31 +22,34 @@
  </head>
  <body>
    <div class="center-container">
-      <form class="login-form" method="post">
+      <div class="card-box">
        <div class="header">
-          <div class="main">Welcome to code-server</div>
+          <h1 class="main">Welcome to code-server</h1>
          <div class="sub">Please log in below. Check code-server's logs for the generated password.</div>
        </div>
-        <input class="user" type="text" autocomplete="username" />
-        <input id="base" type="hidden" name="base" value="/" />
-        <div class="field">
-          <!-- The onfocus code places the cursor at the end of the value. -->
-          <input
-            required
-            autofocus
-            value="{{VALUE}}"
-            onfocus="const value=this.value;this.value='';this.value=value;"
-            class="password"
-            type="password"
-            placeholder="PASSWORD"
-            name="password"
-            autocomplete="current-password"
-          />
-
-          <input class="submit" value="SUBMIT" type="submit" />
+        <div class="content">
+          <form class="login-form" method="post">
+            <input class="user" type="text" autocomplete="username" />
+            <input id="base" type="hidden" name="base" value="/" />
+            <div class="field">
+              <!-- The onfocus code places the cursor at the end of the value. -->
+              <input
+                required
+                autofocus
+                value="{{VALUE}}"
+                onfocus="const value=this.value;this.value='';this.value=value;"
+                class="password"
+                type="password"
+                placeholder="PASSWORD"
+                name="password"
+                autocomplete="current-password"
+              />
+              <input class="submit -button" value="SUBMIT" type="submit" />
+            </div>
+            {{ERROR}}
+          </form>
        </div>
-        {{ERROR}}
-      </form>
+      </div>
    </div>
  </body>
  <script>
--- a/src/browser/pages/update.css
+++ b/src/browser/pages/update.css
@ -2,39 +2,11 @@
  text-align: center;
 }

-.update-form > .apply {
-  background-color: transparent;
-  color: #b6b6b6;
-  cursor: pointer;
-  border: 1px solid #b6b6b6;
-  box-sizing: border-box;
-  padding: 1rem 2rem;
-}
-
-.update-form > .apply:hover {
-  color: #fafafa;
-  border-color: #fafafa;
-}
-
-.update-form > .current {
-  margin-top: 1rem;
-}
-
-.update-form > .links {
-  margin-top: 1rem;
-}
-
-.update-form > .links > .link {
-  color: #b6b6b6;
-  text-decoration: none;
-}
-
-.update-form > .links > .link:hover {
-  color: #fcfcfc;
-  text-decoration: underline;
+.update-form > .cancel {
+  background-color: red;
 }

 .update-form > .error {
  color: red;
-  margin-top: 1rem;
+  margin-top: 16px;
 }
--- a/src/browser/pages/update.html
+++ b/src/browser/pages/update.html
@ -19,13 +19,18 @@
  </head>
  <body>
    <div class="center-container">
-      <form class="update-form" method="post">
-        <h2 class="header">Update</h2>
-        {{UPDATE_STATUS}} {{ERROR}}
-        <div class="links">
-          <a class="link" href="{{BASE}}">go home</a>
+      <div class="card-box">
+        <div class="header">
+          <h1 class="main">Update</h1>
+          <div class="sub">Update code-server.</div>
        </div>
-      </form>
+        <div class="content">
+          <form class="update-form" method="post">
+            {{UPDATE_STATUS}} {{ERROR}}
+            <a class="cancel -button" href="{{BASE}}">Cancel</a>
+          </form>
+        </div>
+      </div>
    </div>
  </body>
 </html>
--- a/src/node/app/app.ts
+++ b/src/node/app/app.ts
@ -166,7 +166,7 @@ export class MainHttpProvider extends HttpProvider {
    if (this.update.isLatestVersion(update)) {
      return `<div class="block-row">
        <div class="item">
-          ${update.version}
+          Latest: ${update.version}
          <div class="sub">Up to date</div>
        </div>
        <div class="item">
@ -178,13 +178,13 @@ export class MainHttpProvider extends HttpProvider {
    }

    return `<div class="block-row">
-      <a class="item -link" href="./update">
-        ${update.version}
+      <div class="item">
+        Latest: ${update.version}
        <div class="sub">Out of date</div>
-      </a>
+      </div>
      <div class="item">
        ${humanize(update.checked)}
-        <a class="sub -link" href="./update/check">Check now</a>
+        <a class="sub -link" href="./update">Update now</a>
      </div>
      <div class="item" >Current: ${this.update.currentVersion}</div>
    </div>`
--- a/src/node/app/update.ts
+++ b/src/node/app/update.ts
@ -162,10 +162,7 @@ export class UpdateHttpProvider extends HttpProvider {
      throw new Error("No update available")
    }

-    return `<button type="submit" class="apply">
-      Update to ${update.version}
-    </button>
-    <div class="current">Current: ${this.currentVersion}</div>`
+    return `<button type="submit" class="apply -button">Update to ${update.version}</button>`
  }

  public async tryUpdate(route: Route): Promise<HttpResponse> {