From 461e7469b5f69e041ed5cbd4de45435a2dd5e492 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 21 Sep 2021 16:50:34 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Abstract=20some=20more=20things?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/InstanceSelectBox.tsx | 17 ++++++-
 frontend/src/components/LoginBox.tsx          |  2 +-
 frontend/src/components/LogoutBox.tsx         |  2 +-
 .../src/components/ObjectPanel.module.css     | 30 +++++++++++++
 frontend/src/components/ObjectPanel.tsx       | 44 +++++++++++++++++++
 .../components/ResearchGroupPanel.module.css  | 34 --------------
 .../src/components/ResearchGroupPanel.tsx     | 21 +++++----
 7 files changed, 104 insertions(+), 46 deletions(-)
 create mode 100644 frontend/src/components/ObjectPanel.module.css
 create mode 100644 frontend/src/components/ObjectPanel.tsx
 delete mode 100644 frontend/src/components/ResearchGroupPanel.module.css

diff --git a/frontend/src/components/InstanceSelectBox.tsx b/frontend/src/components/InstanceSelectBox.tsx
index d77bc79..748ce79 100644
--- a/frontend/src/components/InstanceSelectBox.tsx
+++ b/frontend/src/components/InstanceSelectBox.tsx
@@ -3,7 +3,8 @@ import {Box, Form, Heading, Idiomatic as I, Panel} from "@steffo/bluelib-react";
 import {useInstance} from "./InstanceContext";
 import {useLogin} from "./LoginContext";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faExclamationTriangle, faServer, faTimesCircle} from "@fortawesome/free-solid-svg-icons";
+import {faExclamationTriangle, faServer, faTimesCircle, faUniversity} from "@fortawesome/free-solid-svg-icons";
+import {Loading} from "./Loading";
 
 
 export function InstanceSelectBox(): JSX.Element {
@@ -43,6 +44,20 @@ export function InstanceSelectBox(): JSX.Element {
                     </Panel>
                 )
             }
+            if(instance.validity === null) {
+                return (
+                    <Panel bluelibClassNames={"color-yellow"}>
+                        <Loading text={"Checking..."}/>
+                    </Panel>
+                )
+            }
+            if(instance.details) {
+                return (
+                    <Panel bluelibClassNames={"color-lime"}>
+                        <FontAwesomeIcon icon={faUniversity}/> Selected <I>{instance.details.name}</I> as instance.
+                    </Panel>
+                )
+            }
             return (
                 <Panel>
                     <FontAwesomeIcon icon={faServer}/> Select the Sophon instance you want to connect to by specifying its URL here.
diff --git a/frontend/src/components/LoginBox.tsx b/frontend/src/components/LoginBox.tsx
index fafa6e6..6db9fa4 100644
--- a/frontend/src/components/LoginBox.tsx
+++ b/frontend/src/components/LoginBox.tsx
@@ -149,7 +149,7 @@ export function LoginBox(): JSX.Element {
                 <Form.Field label={"Username"} {...username} disabled={!instance.validity}/>
                 <Form.Field label={"Password"} type={"password"} {...password} disabled={!instance.validity}/>
                 <Form.Row>
-                    <Form.Button onClick={doLogin} disabled={!canLogin} bluelibClassNames={error ? "color-red" : ""}>
+                    <Form.Button onClick={doLogin} disabled={!canLogin}>
                         Login
                     </Form.Button>
                 </Form.Row>
diff --git a/frontend/src/components/LogoutBox.tsx b/frontend/src/components/LogoutBox.tsx
index 52d1529..86aa3d4 100644
--- a/frontend/src/components/LogoutBox.tsx
+++ b/frontend/src/components/LogoutBox.tsx
@@ -24,7 +24,7 @@ export function LogoutBox(): JSX.Element {
             </p>
             <Form>
                 <Form.Row>
-                    <Panel>
+                    <Panel bluelibClassNames={"color-lime"}>
                         <FontAwesomeIcon icon={faUser}/> You are currently logged in as <Variable>{login.userData.username}</Variable>.
                     </Panel>
                 </Form.Row>
diff --git a/frontend/src/components/ObjectPanel.module.css b/frontend/src/components/ObjectPanel.module.css
new file mode 100644
index 0000000..059f19b
--- /dev/null
+++ b/frontend/src/components/ObjectPanel.module.css
@@ -0,0 +1,30 @@
+.ObjectPanel {
+    display: grid;
+    grid-template-areas: "icon name text buttons";
+    grid-template-columns: auto 1fr 4fr auto;
+    grid-gap: 8px;
+
+    justify-content: center;
+    align-items: center;
+}
+
+.ObjectPanel .Icon {
+    grid-area: icon;
+
+    font-size: large;
+}
+
+.ObjectPanel .Name {
+    grid-area: name;
+
+    font-size: large;
+    font-weight: 600;
+}
+
+.ObjectPanel .Text {
+    grid-area: text;
+}
+
+.ObjectPanel .Buttons {
+    grid-area: buttons;
+}
\ No newline at end of file
diff --git a/frontend/src/components/ObjectPanel.tsx b/frontend/src/components/ObjectPanel.tsx
new file mode 100644
index 0000000..00dad4f
--- /dev/null
+++ b/frontend/src/components/ObjectPanel.tsx
@@ -0,0 +1,44 @@
+import * as React from "react"
+import {Panel} from "@steffo/bluelib-react";
+import Style from "./ObjectPanel.module.css"
+import {PanelProps} from "@steffo/bluelib-react/dist/components/panels/Panel";
+import {BluelibHTMLProps} from "@steffo/bluelib-react/dist/types";
+import classNames from "classnames"
+
+
+interface ObjectPanelProps extends PanelProps {}
+interface ObjectSubPanelProps extends BluelibHTMLProps<HTMLDivElement> {}
+
+
+export function ObjectPanel({className, ...props}: ObjectPanelProps): JSX.Element {
+    return (
+        <Panel className={classNames(Style.ObjectPanel, className)} {...props}/>
+    )
+}
+
+
+ObjectPanel.Icon = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
+    return (
+        <div className={classNames(Style.Icon, className)} {...props}/>
+    )
+}
+
+ObjectPanel.Name = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
+    return (
+        <div className={classNames(Style.Name, className)} {...props}/>
+    )
+}
+
+
+ObjectPanel.Text = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
+    return (
+        <div className={classNames(Style.Text, className)} {...props}/>
+    )
+}
+
+
+ObjectPanel.Buttons = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
+    return (
+        <div className={classNames(Style.Buttons, className)} {...props}/>
+    )
+}
diff --git a/frontend/src/components/ResearchGroupPanel.module.css b/frontend/src/components/ResearchGroupPanel.module.css
deleted file mode 100644
index 8541513..0000000
--- a/frontend/src/components/ResearchGroupPanel.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.Panel {
-    display: flex;
-    flex-direction: row;
-
-    align-items: center;
-    gap: 20px;
-}
-
-.Access {
-    font-size: larger;
-}
-
-.Name {
-    font-size: larger;
-    font-weight: 600;
-}
-
-.Owner {
-
-}
-
-.Owner span {
-    font-weight: 500;
-    color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
-}
-
-.Buttons {
-    flex-grow: 0;
-    margin-left: auto;
-}
-
-.Buttons button {
-    height: 38px !important;
-}
\ No newline at end of file
diff --git a/frontend/src/components/ResearchGroupPanel.tsx b/frontend/src/components/ResearchGroupPanel.tsx
index 954135b..0712d25 100644
--- a/frontend/src/components/ResearchGroupPanel.tsx
+++ b/frontend/src/components/ResearchGroupPanel.tsx
@@ -1,11 +1,11 @@
 import * as React from "react"
-import Style from "./ResearchGroupPanel.module.css"
 import {Panel} from "@steffo/bluelib-react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faEnvelope, faGlobe, faQuestion} from "@fortawesome/free-solid-svg-icons";
 import {ResearchGroup} from "../types";
 import {UserLink} from "./UserLink";
 import {Link} from "./Link";
+import {ObjectPanel} from "./ObjectPanel";
 
 
 export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup): JSX.Element {
@@ -21,16 +21,19 @@ export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup):
     }
 
     return (
-        <Panel className={Style.Panel}>
-            <div className={Style.Access}>
+        <ObjectPanel>
+            <ObjectPanel.Icon>
                 {accessIcon}
-            </div>
-            <div className={Style.Name} title={slug}>
+            </ObjectPanel.Icon>
+            <ObjectPanel.Name>
                 <Link href={`/g/${slug}/`}>{name}</Link>
-            </div>
-            <div className={Style.Owner}>
+            </ObjectPanel.Name>
+            <ObjectPanel.Text>
                 Created by <UserLink id={owner}/>
-            </div>
-        </Panel>
+            </ObjectPanel.Text>
+            <ObjectPanel.Buttons>
+
+            </ObjectPanel.Buttons>
+        </ObjectPanel>
     )
 }