[dashboard] Minor refactor of Card and SolidCard components

Author: jankeromnes

components/dashboard/src/admin/License.tsx

@@ -50,40 +50,44 @@ export default function License() {
             >
                 <div className="flex flex-row space-x-4">
                     <Card>
-                        {licenseLevel}
-                        {paid}
-                        <div className="mt-4 font-semibold text-sm">Available features:</div>
-                        <div className="flex flex-col items-start text-sm">
-                            {features &&
-                                features.map((feat: string) => (
-                                    <span className="inline-flex space-x-1">
-                                        {featureList?.includes(feat) ? (
-                                            <CheckSvg fill="currentColor" className="self-center mt-1" />
-                                        ) : (
-                                            <XSvg fill="currentColor" className="self-center h-2 mt-1" />
-                                        )}
-                                        <span>{capitalizeInitials(feat)}</span>
-                                    </span>
-                                ))}
-                        </div>
+                        <span>
+                            {licenseLevel}
+                            {paid}
+                            <div className="mt-4 font-semibold text-sm">Available features:</div>
+                            <div className="flex flex-col items-start text-sm">
+                                {features &&
+                                    features.map((feat: string) => (
+                                        <span className="inline-flex space-x-1">
+                                            {featureList?.includes(feat) ? (
+                                                <CheckSvg fill="currentColor" className="self-center mt-1" />
+                                            ) : (
+                                                <XSvg fill="currentColor" className="self-center h-2 mt-1" />
+                                            )}
+                                            <span>{capitalizeInitials(feat)}</span>
+                                        </span>
+                                    ))}
+                            </div>
+                        </span>
                     </Card>
                     <SolidCard>
-                        <div className="my-2">{statusMessage}</div>
-                        <p className="dark:text-gray-500 font-semibold">Registered Users</p>
-                        <span className="dark:text-gray-300 text-lg">{license?.userCount || 0}</span>
-                        <span className="dark:text-gray-500 text-gray-400 pt-1 text-lg"> / {userLimit} </span>
-                        <p className="dark:text-gray-500 pt-2 font-semibold">License Type</p>
-                        <h4 className="dark:text-gray-300 text-lg">{capitalizeInitials(license?.type || "")}</h4>
-                        <a
-                            className="gp-link flex flex-row mr-2 justify-end font-semibold space-x-2 mt-6"
-                            href="https://www.gitpod.io/self-hosted"
-                            target="_blank"
-                        >
-                            <span className="text-sm">Compare Plans</span>
-                            <div className="self-end">
-                                <LinkSvg />
-                            </div>
-                        </a>
+                        <span>
+                            <div className="my-2">{statusMessage}</div>
+                            <p className="dark:text-gray-500 font-semibold">Registered Users</p>
+                            <span className="dark:text-gray-300 text-lg">{license?.userCount || 0}</span>
+                            <span className="dark:text-gray-500 text-gray-400 pt-1 text-lg"> / {userLimit} </span>
+                            <p className="dark:text-gray-500 pt-2 font-semibold">License Type</p>
+                            <h4 className="dark:text-gray-300 text-lg">{capitalizeInitials(license?.type || "")}</h4>
+                            <a
+                                className="gp-link flex flex-row mr-2 justify-end font-semibold space-x-2 mt-6"
+                                href="https://www.gitpod.io/self-hosted"
+                                target="_blank"
+                            >
+                                <span className="text-sm">Compare Plans</span>
+                                <div className="self-end">
+                                    <LinkSvg />
+                                </div>
+                            </a>
+                        </span>
                     </SolidCard>
                 </div>
             </PageWithSubMenu>

components/dashboard/src/components/Card.tsx

@@ -4,15 +4,16 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-function Card(p: { className?: string; children?: React.ReactNode }) {
+function Card(p: { className?: string; onClick?: () => void; children?: React.ReactNode }) {
     return (
         <div
             className={
-                "flex rounded-xl w-72 h-64 px-4 bg-gray-800 dark:bg-gray-100 text-gray-200 dark:text-gray-500" +
+                "flex flex-col rounded-xl w-72 h-64 px-4 bg-gray-800 dark:bg-gray-100 text-gray-200 dark:text-gray-500 " +
                 (p.className || "")
             }
+            onClick={p.onClick}
         >
-            <span>{p.children}</span>
+            {p.children}
         </div>
     );
 }

components/dashboard/src/components/SolidCard.tsx

@@ -4,15 +4,16 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-function SolidCard(p: { className?: string; children?: React.ReactNode }) {
+function SolidCard(p: { className?: string; onClick?: () => void; children?: React.ReactNode }) {
     return (
         <div
             className={
-                "flex rounded-xl w-72 h-64 px-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-600" +
+                "flex flex-col rounded-xl w-72 h-64 px-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-600 " +
                 (p.className || "")
             }
+            onClick={p.onClick}
         >
-            <span>{p.children}</span>
+            {p.children}
         </div>
     );
 }