fix styles around admin controls

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;

frontend/apps/remark42/app/components/auth-panel/__readonly-label/auth-panel__readonly-label.css

@@ -1,8 +0,0 @@
-.auth-panel__readonly-label {
-  margin-right: 0.3rem;
-}
-
-.auth-panel__readonly-label::after {
-  content: '•';
-  margin-left: 0.3rem;
-}

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

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

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';