Merge pull request #280 from cppalliance/ui-tickets

UI tickets

static/css/styles.css

@@ -1017,6 +1017,10 @@ input[type=file] {
   order: 1;
 }
 
+.order-first {
+  order: -9999;
+}
+
 .float-right {
   float: right;
 }
@@ -1695,6 +1699,10 @@ input[type=file] {
   overflow-y: auto;
 }
 
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .overflow-y-hidden {
   overflow-y: hidden;
 }
@@ -1713,14 +1721,14 @@ input[type=file] {
   border-radius: 0.5rem;
 }
 
-.rounded {
-  border-radius: 0.25rem;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-sm {
   border-radius: 0.125rem;
 }
@@ -1800,6 +1808,10 @@ input[type=file] {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
+.border-green\/60 {
+  border-color: rgb(90 213 153 / 0.6);
+}
+
 .bg-red-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -1864,6 +1876,10 @@ input[type=file] {
   background-color: transparent;
 }
 
+.bg-green\/40 {
+  background-color: rgb(90 213 153 / 0.4);
+}
+
 .bg-opacity-70 {
   --tw-bg-opacity: 0.7;
 }
@@ -1899,6 +1915,16 @@ input[type=file] {
      object-fit: cover;
 }
 
+.object-left {
+  -o-object-position: left;
+     object-position: left;
+}
+
+.object-right {
+  -o-object-position: right;
+     object-position: right;
+}
+
 .p-6 {
   padding: 1.5rem;
 }
@@ -2326,6 +2352,11 @@ input[type=file] {
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
 .placeholder-gray-500::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(107 114 128 / var(--tw-placeholder-opacity));
@@ -2350,18 +2381,18 @@ input[type=file] {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-2xl {
   --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
@@ -2506,6 +2537,11 @@ input[type=file] {
   border-color: rgb(49 74 87 / var(--tw-border-opacity));
 }
 
+.dark .dark\:border-charcoal {
+  --tw-border-opacity: 1;
+  border-color: rgb(23 42 52 / var(--tw-border-opacity));
+}
+
 .dark .dark\:bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(5 26 38 / var(--tw-bg-opacity));
@@ -2525,6 +2561,14 @@ input[type=file] {
   background-color: rgb(49 74 87 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-green\/30 {
+  background-color: rgb(90 213 153 / 0.3);
+}
+
+.dark .dark\:bg-green\/40 {
+  background-color: rgb(90 213 153 / 0.4);
+}
+
 .dark .dark\:font-medium {
   font-weight: 500;
 }
@@ -2727,6 +2771,10 @@ input[type=file] {
     margin-bottom: 1.5rem;
   }
 
+  .md\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -2751,6 +2799,10 @@ input[type=file] {
     width: 50%;
   }
 
+  .md\:w-auto {
+    width: auto;
+  }
+
   .md\:w-48 {
     width: 12rem;
   }
@@ -2791,10 +2843,6 @@ input[type=file] {
     width: 33.333333%;
   }
 
-  .md\:w-auto {
-    width: auto;
-  }
-
   .md\:max-w-7xl {
     max-width: 80rem;
   }
@@ -2871,6 +2919,10 @@ input[type=file] {
     border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
   }
 
+  .md\:overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
   .md\:rounded-none {
     border-radius: 0px;
   }
@@ -3011,6 +3063,14 @@ input[type=file] {
     padding-top: 1.5rem;
   }
 
+  .md\:pt-4 {
+    padding-top: 1rem;
+  }
+
+  .md\:pb-11 {
+    padding-bottom: 2.75rem;
+  }
+
   .md\:text-right {
     text-align: right;
   }

templates/docs_temp.html

@@ -16,7 +16,7 @@ This is a temporary landing page for docs
         <a href="/doc/user-guide/">
           <img
             class="overflow-y-hidden w-full rounded-t-lg max-h-[470px]"
-            src="{% static 'img/fpo/guide.jpg' %}"
+            src="{% static 'img/fpo/fpo_user_guide.png' %}"
             alt="" />
         </a>
         <div class="py-3 px-6 dark:text-white text-slate">
@@ -48,7 +48,7 @@ This is a temporary landing page for docs
         <a href="/doc/contributor-guide/">
           <img
             class="overflow-y-hidden w-full rounded-t-lg max-h-[470px]"
-            src="{% static 'img/fpo/man-tree.jpeg' %}"
+            src="{% static 'img/fpo/fpo_contributor_guide.png' %}"
             alt="" />
         </a>
         <div class="py-3 px-6 dark:text-white text-slate">
@@ -79,13 +79,13 @@ This is a temporary landing page for docs
       <div
         class="flex flex-col text-white bg-white rounded-lg shadow-lg md:flex-row dark:bg-charcoal dark:bg-neutral-700">
         {# FIXME #}
-        <a href="/doc/formal-reviews/">
+        <a href="/doc/formal-reviews/" class="md:w-1/2 block">
           <img
-            class="object-cover w-full h-96 rounded-t-lg md:w-48 md:h-auto md:rounded-none md:rounded-l-lg"
-            src="{% static 'img/fpo/clipboardman.jpeg' %}"
+            class="object-cover rounded-t-lg md:rounded-none md:rounded-l-lg h-full w-auto overflow-x-hidden"
+            src="{% static 'img/fpo/fpo_review.png' %}"
             alt="" />
         </a>
-        <div class="flex flex-col justify-start p-6 dark:text-white text-slate">
+        <div class="flex flex-col md:w-1/2 justify-start p-6 dark:text-white text-slate">
           <h5
             class="text-xl font-bold leading-tight">
             Boost Formal Reviews
@@ -105,7 +105,7 @@ This is a temporary landing page for docs
 
       <div
         class="flex flex-col bg-white rounded-lg shadow-lg md:flex-row dark:bg-charcoal dark:bg-neutral-700">
-        <div class="flex flex-col justify-start p-6 w-full dark:text-white text-slate">
+        <div class="flex flex-col justify-start p-6 md:w-1/2 dark:text-white text-slate">
           <h5
             class="text-xl font-bold leading-tight">
             Release Process
@@ -123,10 +123,10 @@ This is a temporary landing page for docs
           </ul>
         </div>
         {# FIXME #}
-        <a href="/doc/release-process/">
+        <a href="/doc/release-process/" class="md:w-1/2 block order-first md:order-last">
         <img
-          class="object-cover w-full h-96 rounded-t-lg md:w-48 md:h-auto md:rounded-none md:rounded-r-lg"
-          src="{% static 'img/fpo/construction.png' %}"
+          class="object-cover rounded-t-lg md:rounded-none md:rounded-r-lg h-full w-auto overflow-x-hidden object-right"
+          src="{% static 'img/fpo/fpo_release_process.png' %}"
           alt="" />
         </a>
       </div>

templates/includes/_footer.html

@@ -1,6 +1,6 @@
 {% load static %}
 
-<footer class="py-5 px-4 my-5 mx-auto max-w-full sm:mt-24 md:py-4 md:my-6">
+<footer class="py-5 px-4 my-5 mx-auto max-w-full sm:mt-24 md:pt-4 md:pb-11 md:mt-6 md:mb-11">
 {#  {% if not request.user.is_authenticated %}#}
 {#  <div class="md:flex" id="footerSignup">#}
 {#    <div class="grid gap-4 content-center text-left md:w-1/2">#}

templates/includes/_header.html

@@ -5,7 +5,7 @@
 <div class="relative">
   <div class="relative pb-11 md:pb-3">
     <div>
-      <div class="hidden items-center pt-2 pb-4 border-b-2 border-gray-300 md:flex darK:border-charcoal">
+      <div class="hidden items-center pt-2 pb-4 border-b-2 border-gray-300 md:flex dark:border-charcoal">
         <div class="w-[130px]">
           <a href="{% url 'home' %}">
               <img class="hidden -mb-3 w-auto dark:inline-block h-[32px]"
@@ -100,16 +100,16 @@
               >
                 <a
                   @click="mode='light'; setColorMode('light'); modeOpen = false;"
-                  :class="{'font-bold': mode === 'light', 'font-thin': mode !== 'light' }"
+                  :class="{'font-bold': mode === 'light', 'font-medium': mode !== 'light' }"
                   class="block py-2 text-xs cursor-pointer dark:text-white text-charcoal dark:hover:text-orange hover:text-orange"
                   >
-                  <i class="inline-block mr-1 fas fa-sun text-gold"></i>
+                  <i class="inline-block mr-1 fas fa-sun text-gold font-semibold"></i>
                   Light Mode
                 </a>
 
                 <a
                   @click="mode = 'dark'; setColorMode('dark'); modeOpen = false;"
-                  :class="{'font-bold': mode === 'dark', 'font-thin': mode !== 'dark' }"
+                  :class="{'font-bold': mode === 'dark', 'font-medium': mode !== 'dark' }"
                   class="block py-2 text-xs cursor-pointer dark:text-white text-charcoal dark:hover:text-orange hover:text-orange"
                   >
                   <i class="inline-block mr-1 fas fa-moon text-sky-600"></i>

templates/libraries/_library_list_item.html

@@ -21,7 +21,7 @@
     <p class="mb-3 text-gray-700 dark:text-gray-300">{{ library.description }}</p>
   </div>
   <div class="text-sm flex py-3 bottom-0 absolute w-[90%]">
-    <div class="w-1/6"><span class="py-1 px-2 text-sm font-bold text-gray-400 rounded-full border bg-green/20 border-green/40 dark:bg-green/10">{{ library.cpp_standard_minimum }}</span></div>
+    <div class="w-1/6"><span class="py-0 px-2 text-sm font-bold text-gray-600 dark:text-gray-300 rounded-full border bg-green/40 border-green/60 dark:bg-green/40">{{ library.cpp_standard_minimum }}</span></div>
     <div class="w-1/6 tracking-wider text-charcoal dark:text-white/60">2yrs</div>
     <div class="w-4/6 text-right dark:text-gray-400 text-slate">
       {% for c in library.categories.all %}