added info line about readonly mode

apps/remix-ide/src/app/tabs/settings-tab.tsx

@@ -53,19 +53,19 @@ module.exports = class SettingsTab extends ViewPlugin {
 
   render() {
     return <div id='settingsTab'>
-        <PluginViewWrapper plugin={this} />
-      </div>
+      <PluginViewWrapper plugin={this} />
+    </div>
   }
 
   updateComponent(state: any){
     return <RemixUiSettings
-    config={state.config}
-    editor={state.editor}
-    _deps={state._deps}
-    useMatomoAnalytics={state.useMatomoAnalytics}
-    themeModule = {state._deps.themeModule}
-    localeModule={state._deps.localeModule}
-  />
+      config={state.config}
+      editor={state.editor}
+      _deps={state._deps}
+      useMatomoAnalytics={state.useMatomoAnalytics}
+      themeModule = {state._deps.themeModule}
+      localeModule={state._deps.localeModule}
+    />
   }
 
   renderComponent () {

libs/remix-ui/editor/src/lib/remix-ui-editor.tsx

@@ -685,7 +685,11 @@ export const EditorUI = (props: EditorUIProps) => {
         options={{ glyphMargin: true, readOnly: ((!editorRef.current || !props.currentFile) && editorModelsState[props.currentFile]?.readOnly) }}
         defaultValue={defaultEditorValue}
       />
-
+      {editorModelsState[props.currentFile]?.readOnly && <span className='pl-4 h6 mb-0 w-100 alert-info position-absolute bottom-0 end-0'>
+        <i className="fas fa-lock-alt p-2"></i>
+          The file is opened in <b>read-only</b> mode.
+        </span>
+      }
     </div>
   )
 }

libs/remix-ui/locale-module/src/lib/remix-ui-locale-module.tsx

@@ -15,9 +15,11 @@ export function RemixUiLocaleModule({ localeModule }: RemixUiLocaleModuleProps)
   }, [localeName, localeModule])
 
   return (
-    <div className="border-top">
+    <div className="border-top mb-4">
       <div className="card-body pt-3 pb-2">
-        <h6 className="card-title"><FormattedMessage id='settings.locales' defaultMessage='Lanaguage' /></h6>
+        <h6 className="card-title">
+          <FormattedMessage id='settings.locales' defaultMessage='Lanaguage' />
+        </h6>
         <div className="card-text locales-container">
           {localeModule.getLocales()
             ? localeModule.getLocales().map((locale, idx) => (