fix styles around admin controls

umputun · Oct 28, 2023 · 2866f65 · 2866f65
1 parent 69b18d3
commit 2866f65
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 16 deletions.
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
@@ -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/...d/apps/remark42/app/components/auth-panel/__readonly-label/auth-panel__readonly-label.css b/...d/apps/remark42/app/components/auth-panel/__readonly-label/auth-panel__readonly-label.css
diff --git 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
@@ -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
@@ -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';