[dashboard] Re-implement Plans page for new dashboard

Author: jankeromnes

components/dashboard/package.json

@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "@gitpod/gitpod-protocol": "0.1.5",
+    "countries-list": "^2.6.1",
     "moment": "^2.29.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

components/dashboard/src/components/SelectableCard.tsx

@@ -13,9 +13,9 @@ export interface SelectableCardProps {
 }
 
 function SelectableCard(props: SelectableCardProps) {
-    return <div className={`rounded-xl px-4 py-3 flex flex-col cursor-pointer group border-2 transition ease-in-out ${props.selected ? 'border-green-500' : 'border-gray-300 hover:border-gray-400'} ${props.className || ''}`} onClick={props.onClick}>
+    return <div className={`rounded-xl px-3 py-3 flex flex-col cursor-pointer group border-2 transition ease-in-out ${props.selected ? 'border-green-500' : 'border-gray-300 hover:border-gray-400'} ${props.className || ''}`} onClick={props.onClick}>
         <div className="flex items-center">
-            <p className={`w-full text-base font-semibold ${props.selected ? 'text-green-500' : 'text-gray-300 group-hover:text-gray-400'}`}>{props.title}</p>
+            <p className={`w-full pl-1 text-base font-semibold ${props.selected ? 'text-green-500' : 'text-gray-400'}`}>{props.title}</p>
             <input className={'text-green-500 ' + (props.selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100')} type="radio" checked={props.selected} />
         </div>
         {props.children}

components/dashboard/src/images/info.svg

@@ -65,4 +65,17 @@
     input[type=radio] {
         @apply rounded-md border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
     }
+
+    progress {
+        @apply h-2 rounded;
+    }
+    progress::-webkit-progress-bar {
+        @apply rounded-md bg-gray-200;
+    }
+    progress::-webkit-progress-value {
+        @apply rounded-md bg-green-500;
+    }
+    progress::-moz-progress-bar {
+        @apply rounded-md bg-green-500;
+    }
 }

components/dashboard/src/index.css

@@ -1053,6 +1053,29 @@ input[type=radio]:focus {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+progress {
+  border-radius: 0.25rem;
+  height: 0.5rem;
+}
+
+progress::-webkit-progress-bar {
+  --tw-bg-opacity: 1;
+  background-color: rgba(231, 229, 228, var(--tw-bg-opacity));
+  border-radius: 0.375rem;
+}
+
+progress::-webkit-progress-value {
+  --tw-bg-opacity: 1;
+  background-color: rgba(132, 204, 22, var(--tw-bg-opacity));
+  border-radius: 0.375rem;
+}
+
+progress::-moz-progress-bar {
+  --tw-bg-opacity: 1;
+  background-color: rgba(132, 204, 22, var(--tw-bg-opacity));
+  border-radius: 0.375rem;
+}
+
 .space-y-0 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0 !important;
   margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))) !important;

components/dashboard/src/settings/Plans.tsx

@@ -8052,6 +8052,11 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+countries-list@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/countries-list/-/countries-list-2.6.1.tgz#d479757ac873b1e596ccea0a925962d20396c0cb"
+  integrity sha512-jXM1Nv3U56dPQ1DsUSsEaGmLHburo4fnB7m+1yhWDUVvx5gXCd1ok/y3gXCjXzhqyawG+igcPYcAl4qjkvopaQ==
+
 [email protected]:
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/crc/-/crc-3.4.4.tgz#9da1e980e3bd44fc5c93bf5ab3da3378d85e466b"