✨ Abstract some more things

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.

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>

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>

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;
+}

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}/>
+    )
+}

frontend/src/components/ResearchGroupPanel.module.css

@@ -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;
-}

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>
     )
 }