From 2866f65d2fa8d48faf5eb2e615f3e8c09f8b4aef Mon Sep 17 00:00:00 2001
From: Paul Mineev <paul@mineev.me>
Date: Sat, 28 Oct 2023 02:26:01 -0400
Subject: [PATCH] fix styles around admin controls

---
 .../auth-panel/__column/auth-panel__column.css    | 15 +++++++++++++++
 .../auth-panel__readonly-label.css                |  8 --------
 .../app/components/auth-panel/auth-panel.css      |  2 +-
 .../app/components/auth-panel/auth-panel.tsx      | 10 ++++------
 .../remark42/app/components/auth-panel/index.ts   |  1 -
 5 files changed, 20 insertions(+), 16 deletions(-)
 delete mode 100644 frontend/apps/remark42/app/components/auth-panel/__readonly-label/auth-panel__readonly-label.css

diff --git a/frontend/apps/remark42/app/components/auth-panel/__column/auth-panel__column.css b/frontend/apps/remark42/app/components/auth-panel/__column/auth-panel__column.css
index 350f95e4e4..770215b227 100644
--- a/frontend/apps/remark42/app/components/auth-panel/__column/auth-panel__column.css
+++ b/frontend/apps/remark42/app/components/auth-panel/__column/auth-panel__column.css
@@ -1,3 +1,18 @@
+.auth-panel__column_separated > * + * {
+  position: relative;
+  display: inline-block;
+  margin-left: 20px;
+
+  &::before {
+    position: absolute;
+    left: -15px;
+    display: inline-block;
+    width: 10px;
+    text-align: center;
+    content: '•';
+  }
+}
+
 .auth-panel__column:last-child {
   margin-left: 8px;
   text-align: right;
diff --git a/frontend/apps/remark42/app/components/auth-panel/__readonly-label/auth-panel__readonly-label.css b/frontend/apps/remark42/app/components/auth-panel/__readonly-label/auth-panel__readonly-label.css
deleted file mode 100644
index f29ea6884a..0000000000
--- a/frontend/apps/remark42/app/components/auth-panel/__readonly-label/auth-panel__readonly-label.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.auth-panel__readonly-label {
-  margin-right: 0.3rem;
-}
-
-.auth-panel__readonly-label::after {
-  content: '•';
-  margin-left: 0.3rem;
-}
diff --git a/frontend/apps/remark42/app/components/auth-panel/auth-panel.css b/frontend/apps/remark42/app/components/auth-panel/auth-panel.css
index 9988a8a74a..459d498b52 100644
--- a/frontend/apps/remark42/app/components/auth-panel/auth-panel.css
+++ b/frontend/apps/remark42/app/components/auth-panel/auth-panel.css
@@ -3,5 +3,5 @@
   justify-content: space-between;
   font-size: 14px;
   line-height: 16px;
-  align-items: baseline;
+  align-items: center;
 }
diff --git a/frontend/apps/remark42/app/components/auth-panel/auth-panel.tsx b/frontend/apps/remark42/app/components/auth-panel/auth-panel.tsx
index 1e9ea9311c..36dc1cf743 100644
--- a/frontend/apps/remark42/app/components/auth-panel/auth-panel.tsx
+++ b/frontend/apps/remark42/app/components/auth-panel/auth-panel.tsx
@@ -156,13 +156,11 @@ class AuthPanelComponent extends Component<Props, State> {
         <div className="auth-panel__column">{user ? this.renderAuthorized(user) : read_only && <Auth />}</div>
         {this.renderThirdPartyWarning()}
         {this.renderCookiesWarning()}
-        <div className="auth-panel__column">
-          {isSettingsLabelVisible && this.renderSettingsLabel()}
-          {isSettingsLabelVisible && ' • '}
-          {isAdmin && this.renderReadOnlySwitch()}
-          {isAdmin && read_only && ' • '}
+        <div className="auth-panel__column auth-panel__column_separated">
+          {isSettingsLabelVisible && <span>{this.renderSettingsLabel()}</span>}
+          {isAdmin && <span>{this.renderReadOnlySwitch()}</span>}
           {!isAdmin && read_only && (
-            <span className="auth-panel__readonly-label">
+            <span>
               <FormattedMessage id="authPanel.read-only" defaultMessage="Read-only" />
             </span>
           )}
diff --git a/frontend/apps/remark42/app/components/auth-panel/index.ts b/frontend/apps/remark42/app/components/auth-panel/index.ts
index b8d56e4ad5..db45525977 100644
--- a/frontend/apps/remark42/app/components/auth-panel/index.ts
+++ b/frontend/apps/remark42/app/components/auth-panel/index.ts
@@ -1,6 +1,5 @@
 import './auth-panel.css';
 
-import './__readonly-label/auth-panel__readonly-label.css';
 import './__column/auth-panel__column.css';
 
 export * from './auth-panel';