Here we go

- Moved Delete/Save buttons to bottom of flag
- Changed all arrow/v's to proper carrots
- Fixed your weird ass way of hiding the dropdown bodies
- Fixed the flag inputs overflowing
- Fixed various margins/paddings
- The background of the list view is now #696969 niceeee
- Added   for the list view so your name and type aren't glued together anymore

src/components/InputElements.tsx

@@ -48,7 +48,7 @@ export type InputElementProperties<T> = {
 
 export const ToggleSwitch = ({ value, onChange, inputRef, children }: InputElementProperties<boolean>) => {
     return <label>
-        <span className="check-box check-box-row">
+        <span className="check-box check-box-row mb-2">
             {children && <b>{children}</b>}
             <input ref={inputRef} defaultChecked={value} onChange={onChange} type='checkbox' />
         </span>

src/css/index.css

@@ -7,7 +7,7 @@
   --color-primary: #2760aa;
   --color-lightGrey: #d2d6dd;
   --color-grey: #ccc;
-  --color-darkGrey: #777;
+  --color-darkGrey: #696969;
   --color-error: #d43939;
   --color-success: #28bd14;
   --grid-maxWidth: 120rem;

src/css/pages/Admin.css

@@ -18,7 +18,8 @@
 }
 
 details .flag {
-    margin-left: 1.7rem;
+    margin: 1.7rem;
+    padding-top: 5px;
 }
 
 .tile {
@@ -36,16 +37,61 @@ details .flag {
     user-select: none;
     background-color: var(--color-darkGrey);
     padding: 1rem;
-    margin: 0.5rem;
+    margin: 0.5rem 0rem;
     border-radius: 1rem;
     border: 2px solid var(--bg-color);
 }
 
 .list.category > * {
     margin-left: 10px;
+    margin-right: 10px;
 }
 
 .popup .flag {
     height: 500px;
     width: 500px;
+}
+
+.list .listBody{
+    display: none;
+}
+.list.open > .listBody{
+    display: inherit;
+}
+
+.list .listHeader{
+    display: flex;
+    align-items: center;
+}
+.list-carrot{
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23f5f5f5' d='M441.751,475.584L222.166,256L441.75,36.416c6.101-6.101,7.936-15.275,4.629-23.253C443.094,5.184,435.286,0,426.667,0 H320.001c-5.675,0-11.093,2.24-15.083,6.251L70.251,240.917c-8.341,8.341-8.341,21.824,0,30.165l234.667,234.667 c3.989,4.011,9.408,6.251,15.083,6.251h106.667c8.619,0,16.427-5.184,19.712-13.163 C449.687,490.858,447.852,481.685,441.751,475.584z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
+    width: 10px;
+    height: 10px;
+    transition: transform ease-in-out 0.1s;
+    background-size: 10px;
+    background-repeat: no-repeat;
+    background-position: center;
+    transform: rotate(-180deg);
+    display: inline-block;
+    margin-right: 8px;
+    margin-left: 3px;
+}
+.list.open > .listHeader > .list-carrot, .list .listBody details[open] summary > .list-carrot{
+    transform: rotate(-90deg);
+    transition: transform ease-in-out 0.1s;
+}
+.list .listBody details summary::marker{
+    content: "";
+}
+.list .listBody details summary{
+    display: flex;
+    align-items: center;
+}
+
+.unsaved-changes {
+    outline: solid 1px #ffb300a6;
+}
+
+.list input{
+    box-sizing: border-box;
 }

src/pages/admin/Flags.tsx

@@ -11,6 +11,7 @@ const Flag = ({ flag: incoming }: { flag: APIFlag }) => {
     const valueRef = useRef<HTMLInputElement>(null);
 
     const updateFlag = (f: APIFlag) => {
+        console.log(f);
         setFlag(f);
         setUnsaved(true);
     };
@@ -26,13 +27,11 @@ const Flag = ({ flag: incoming }: { flag: APIFlag }) => {
     else if (flag.type === 'number') Input = <NumberInput onChange={() => setUnsaved(true)} inputRef={valueRef} value={flag.value as number} type='float' />;
     else if (flag.type === 'boolean') Input = <ToggleSwitch onChange={() => setUnsaved(true)} inputRef={valueRef} value={flag.value as boolean} />;
 
-    return <div className='flag mt-0 mb-0'>
+    return <div className='flag mt-0 mb-1'>
         {unsaved && <i><small>Unsaved changes</small></i>}
         <h3 className="mt-0 mb-1">
             <ClickToEdit onUpdate={val => updateFlag({ ...flag, name: val })} value={flag.name} />
         </h3>
-        <button className="button danger">Delete</button>
-        {unsaved && <button onClick={save} className="button primary">Save</button>}
         <p className="mt-0 mb-1"><b>ID:</b> {flag.id}</p>
         <p className="mt-0 mb-1">
             <b>Environment: </b>
@@ -50,6 +49,8 @@ const Flag = ({ flag: incoming }: { flag: APIFlag }) => {
             <b>Value: </b>
             {Input}
         </p>
+        <button className="button danger">Delete</button>
+        {unsaved && <button onClick={save} className="button primary">Save</button>}
     </div>;
 
 };
@@ -67,7 +68,8 @@ const FlagListElement = ({ flag }: { flag: APIFlag, onClick?: React.ReactEventHa
     // </div>;
     return <details className='card list-element mt-2 mb-2'>
         <summary className="clickable">
-            <b>{flag.name}</b> [{flag.type}] ({flag.id})
+            <i className="list-carrot"></i>
+            <b>{flag.name}</b>&nbsp;[{flag.type}] ({flag.id})
         </summary>
 
         <Flag flag={flag} />
@@ -93,9 +95,9 @@ const ListCategory = ({ flags, name, setFlag }: { flags: OrganisedFlags, name: s
         {elements}
     </div>;
 
-    return <div className="list category">
-        <b className="clickable" onClick={() => { setHidden(!hidden); }}>{hidden ? '>' : 'v'} {capitalise(name || 'Unordered')}</b>
-        <div hidden={hidden}>
+    return <div className={`list category${ hidden ? "" : " open" }`}>
+        <b className="clickable listHeader" onClick={() => { setHidden(!hidden); }}><i className="list-carrot"></i> {capitalise(name || 'Unordered')}</b>
+        <div className="listBody">
             {elements}
         </div>
     </div>;