Fix/markup (#354)

* fix markup

public/locales/en/translation.json

@@ -362,6 +362,7 @@
   "Suggest an idea": "Suggest an idea",
   "Support Discours": "Support Discours",
   "Support the project": "Support the project",
+  "Support us": "Support us",
   "Terms of use": "Site rules",
   "Text checking": "Text checking",
   "Thank you": "Thank you",

public/locales/ru/translation.json

@@ -382,6 +382,7 @@
   "Suggest an idea": "Предложить идею",
   "Support Discours": "Поддержите Дискурс",
   "Support the project": "Поддержать проект",
+  "Support us": "Помочь журналу",
   "Terms of use": "Правила сайта",
   "Text checking": "Проверка текста",
   "Thank you": "Благодарности",

src/components/Views/Expo/Expo.module.scss

@@ -4,10 +4,6 @@
   padding: 0 0 4rem;
   min-height: 100vh;
 
-  .navigation {
-    padding: 0;
-  }
-
   .showMore {
     display: flex;
     width: 100%;

src/components/Views/Feed/Feed.module.scss

@@ -205,6 +205,7 @@
     margin-top: 0;
     margin-bottom: 0;
     min-width: 300px;
+    overflow: hidden;
 
     & > li {
       margin-bottom: 0;

src/components/Views/Feed/Feed.tsx

@@ -203,6 +203,10 @@ export const Feed = (props: Props) => {
   )
   const ogTitle = t('Feed')
 
+  const myPopupProps = {
+    horizontalAnchor: 'right',
+  }
+
   return (
     <div class="wide-container feed">
       <Meta name="descprition" content={description} />
@@ -256,6 +260,7 @@ export const Feed = (props: Props) => {
             <div class={styles.dropdowns}>
               <Show when={searchParams().by && searchParams().by !== 'publish_date'}>
                 <DropDown
+                  popupProps={{ horizontalAnchor: 'right' }}
                   options={periods}
                   currentOption={currentPeriod()}
                   triggerCssClass={styles.periodSwitcher}
@@ -263,6 +268,7 @@ export const Feed = (props: Props) => {
                 />
               </Show>
               <DropDown
+                popupProps={{ horizontalAnchor: 'right' }}
                 options={visibilities}
                 currentOption={currentVisibility()}
                 triggerCssClass={styles.periodSwitcher}

src/components/_shared/DropDown/DropDown.module.scss

@@ -8,3 +8,7 @@
     transform: rotate(180deg);
   }
 }
+
+.active {
+  font-weight: 600;
+}

src/components/_shared/DropDown/DropDown.tsx

@@ -14,7 +14,7 @@ export type Option = {
 
 type Props<TOption> = {
   class?: string
-  popupProps?: PopupProps
+  popupProps?: Partial<PopupProps>
   options: TOption[]
   currentOption: TOption
   triggerCssClass?: string
@@ -56,9 +56,12 @@ export const DropDown = <TOption extends Option = Option>(props: Props<TOption>)
         onVisibilityChange={(isVisible) => setIsPopupVisible(isVisible)}
         {...props.popupProps}
       >
-        <For each={props.options.filter((p) => p.value !== props.currentOption.value)}>
+        <For each={props.options}>
           {(option) => (
-            <div class="link" onClick={() => props.onChange(option)}>
+            <div
+              class={clsx('link', { [styles.active]: props.currentOption.value === option.value })}
+              onClick={() => props.onChange(option)}
+            >
               {option.title}
             </div>
           )}