View tweaks and fixes

src/components/Inputs/Switch.tsx

@@ -15,15 +15,19 @@ export function Switch(props: Immutable<Props>): JSX.Element {
       className={`relative grid h-6 w-12 rounded-full border-2
       border-mid transition-colors ${
         disabled ? "cursor-not-allowed" : "cursor-pointer"
-      } ${className} ${state ? "bg-mid" : "bg-light"}`}
+      } ${className} ${
+        state ? "border-none bg-mid shadow-inner-sm shadow-shade" : "bg-light"
+      }`}
       onClick={() => {
         if (!disabled) setState(!state);
       }}
     >
       <div
-        className={`absolute top-0 bottom-0 left-0
+        className={`absolute ${
+          state ? "top-[2px] bottom-[2px] left-[2px]" : "top-0 bottom-0 left-0"
+        }
         aspect-square rounded-full bg-dark transition-transform ${
-          state && "translate-x-[115%]"
+          state && "translate-x-[120%]"
         }`}
       ></div>
     </div>

src/components/Panels/MainPanel.tsx

@@ -190,14 +190,12 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
             <Markdown>{langui.licensing_notice}</Markdown>
           )}
         </p>
-        <a
+        <div className="mt-4 mb-8 grid place-content-center">
-          aria-label="Read more about the license we use for this website"
+          <a
-          className="colorize-black hover:colorize-dark transition-[filter]"
+            aria-label="Read more about the license we use for this website"
-          href="https://creativecommons.org/licenses/by-sa/4.0/"
+            className="transition-[filter] grid grid-flow-col place-content-center gap-1
-        >
-          <div
-            className="mt-4 mb-8 grid grid-flow-col place-content-center gap-1
             hover:[--theme-color-black:var(--theme-color-dark)]"
+            href="https://creativecommons.org/licenses/by-sa/4.0/"
           >
             <div
               className="aspect-square w-6 bg-black [mask:url('/icons/creative-commons-brands.svg')]
@@ -213,8 +211,8 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
                [mask:url('/icons/creative-commons-sa-brands.svg')] ![mask-size:contain]
                ![mask-repeat:no-repeat] ![mask-position:center]"
             />
-          </div>
+          </a>
-        </a>
+        </div>
         <p>
           {langui.copyright_notice && (
             <Markdown>{langui.copyright_notice}</Markdown>

src/contexts/AppLayoutContext.tsx

@@ -128,7 +128,7 @@ export function AppContextProvider(props: Immutable<Props>): JSX.Element {
 
   const [searchPanelOpen, setSearchPanelOpen] = useStateWithLocalStorage<
     boolean | undefined
-  >("mainPanelOpen", initialState.mainPanelOpen);
+  >("searchPanelOpen", initialState.searchPanelOpen);
 
   return (
     <AppContext.Provider

src/pages/news/index.tsx

@@ -34,7 +34,8 @@ export default function News(props: Immutable<Props>): JSX.Element {
 
   useEffect(() => {
     setFilteredItems(filterItems(posts, searchName));
-  }, [posts, searchName]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchName]);
 
   const subPanel = (
     <SubPanel>

src/tailwind.css

@@ -224,298 +224,4 @@ input[type="submit"] {
 }
 .tippy-content {
   @apply relative z-10 px-6 py-4;
-}
+}
-
-/* LIGHTBOX */
-
-@keyframes closeWindow {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.ril__outer {
-  @apply h-full w-full touch-none bg-shade bg-opacity-50 outline-none [backdrop-filter:blur(2px)];
-}
-
-.ril__outerClosing {
-  opacity: 0;
-}
-
-.ril__inner {
-  @apply absolute inset-0;
-}
-
-.ril__image,
-.ril__imagePrev,
-.ril__imageNext {
-  @apply absolute inset-0 m-auto max-w-none touch-none;
-}
-
-.ril__image {
-  @apply drop-shadow-shade-2xl;
-}
-
-.ril__navButtons {
-  @apply absolute inset-y-0 m-auto h-8 w-5 cursor-pointer px-10 py-8;
-}
-.ril__navButtons:hover {
-  opacity: 1;
-}
-.ril__navButtons:active {
-  opacity: 0.7;
-}
-
-.ril__navButtonPrev {
-  left: 0;
-  background: rgba(0, 0, 0, 0.2)
-    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==")
-    no-repeat center;
-}
-
-.ril__navButtonNext {
-  right: 0;
-  background: rgba(0, 0, 0, 0.2)
-    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+")
-    no-repeat center;
-}
-
-.ril__caption,
-.ril__toolbar {
-  @apply absolute inset-x-0 flex justify-between bg-shade bg-opacity-50;
-}
-
-.ril__caption {
-  bottom: 0;
-  max-height: 150px;
-  overflow: auto;
-}
-
-.ril__captionContent {
-  padding: 10px 20px;
-  color: #fff;
-}
-
-.ril__toolbar {
-  @apply top-0 h-12;
-}
-
-.ril__toolbarSide {
-  height: 50px;
-  margin: 0;
-}
-
-.ril__toolbarLeftSide {
-  padding-left: 20px;
-  padding-right: 0;
-  flex: 0 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ril__toolbarRightSide {
-  padding-left: 0;
-  padding-right: 20px;
-  flex: 0 0 auto;
-}
-
-.ril__toolbarItem {
-  display: inline-block;
-  line-height: 50px;
-  padding: 0;
-  color: #fff;
-  font-size: 120%;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ril__toolbarItemChild {
-  vertical-align: middle;
-}
-
-.ril__builtinButton {
-  width: 40px;
-  height: 35px;
-  cursor: pointer;
-  border: none;
-  opacity: 0.7;
-}
-.ril__builtinButton:hover {
-  opacity: 1;
-}
-.ril__builtinButton:active {
-  outline: none;
-}
-
-.ril__builtinButtonDisabled {
-  cursor: default;
-  opacity: 0.5;
-}
-.ril__builtinButtonDisabled:hover {
-  opacity: 0.5;
-}
-
-.ril__closeButton {
-  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=")
-    no-repeat center;
-}
-
-.ril__zoomInButton {
-  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+")
-    no-repeat center;
-}
-
-.ril__zoomOutButton {
-  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=")
-    no-repeat center;
-}
-
-.ril__outerAnimating {
-  animation-name: closeWindow;
-}
-
-@keyframes pointFade {
-  0%,
-  19.999%,
-  100% {
-    opacity: 0;
-  }
-  20% {
-    opacity: 1;
-  }
-}
-
-.ril__loadingCircle {
-  width: 60px;
-  height: 60px;
-  position: relative;
-}
-
-.ril__loadingCirclePoint {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-.ril__loadingCirclePoint::before {
-  content: "";
-  display: block;
-  margin: 0 auto;
-  width: 11%;
-  height: 30%;
-  background-color: #fff;
-  border-radius: 30%;
-  animation: pointFade 800ms infinite ease-in-out both;
-}
-.ril__loadingCirclePoint:nth-of-type(1) {
-  transform: rotate(0deg);
-}
-.ril__loadingCirclePoint:nth-of-type(7) {
-  transform: rotate(180deg);
-}
-.ril__loadingCirclePoint:nth-of-type(1)::before,
-.ril__loadingCirclePoint:nth-of-type(7)::before {
-  animation-delay: -800ms;
-}
-.ril__loadingCirclePoint:nth-of-type(2) {
-  transform: rotate(30deg);
-}
-.ril__loadingCirclePoint:nth-of-type(8) {
-  transform: rotate(210deg);
-}
-.ril__loadingCirclePoint:nth-of-type(2)::before,
-.ril__loadingCirclePoint:nth-of-type(8)::before {
-  animation-delay: -666ms;
-}
-.ril__loadingCirclePoint:nth-of-type(3) {
-  transform: rotate(60deg);
-}
-.ril__loadingCirclePoint:nth-of-type(9) {
-  transform: rotate(240deg);
-}
-.ril__loadingCirclePoint:nth-of-type(3)::before,
-.ril__loadingCirclePoint:nth-of-type(9)::before {
-  animation-delay: -533ms;
-}
-.ril__loadingCirclePoint:nth-of-type(4) {
-  transform: rotate(90deg);
-}
-.ril__loadingCirclePoint:nth-of-type(10) {
-  transform: rotate(270deg);
-}
-.ril__loadingCirclePoint:nth-of-type(4)::before,
-.ril__loadingCirclePoint:nth-of-type(10)::before {
-  animation-delay: -400ms;
-}
-.ril__loadingCirclePoint:nth-of-type(5) {
-  transform: rotate(120deg);
-}
-.ril__loadingCirclePoint:nth-of-type(11) {
-  transform: rotate(300deg);
-}
-.ril__loadingCirclePoint:nth-of-type(5)::before,
-.ril__loadingCirclePoint:nth-of-type(11)::before {
-  animation-delay: -266ms;
-}
-.ril__loadingCirclePoint:nth-of-type(6) {
-  transform: rotate(150deg);
-}
-.ril__loadingCirclePoint:nth-of-type(12) {
-  transform: rotate(330deg);
-}
-.ril__loadingCirclePoint:nth-of-type(6)::before,
-.ril__loadingCirclePoint:nth-of-type(12)::before {
-  animation-delay: -133ms;
-}
-.ril__loadingCirclePoint:nth-of-type(7) {
-  transform: rotate(180deg);
-}
-.ril__loadingCirclePoint:nth-of-type(13) {
-  transform: rotate(360deg);
-}
-.ril__loadingCirclePoint:nth-of-type(7)::before,
-.ril__loadingCirclePoint:nth-of-type(13)::before {
-  animation-delay: 0ms;
-}
-
-.ril__loadingContainer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.ril__imagePrev .ril__loadingContainer,
-.ril__imageNext .ril__loadingContainer {
-  display: none;
-}
-
-.ril__errorContainer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-}
-.ril__imagePrev .ril__errorContainer,
-.ril__imageNext .ril__errorContainer {
-  display: none;
-}
-
-.ril__loadingContainer__icon {
-  color: #fff;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}