Edit UI #421

Activity

1. AnythingLinux commented on Jun 1, 2026

   

   AnythingLinux

   on Jun 1, 2026

   Last edited by AnythingLinux

   More actions

   @thepcb88

   #Change Logo:
   #This is the folder where all the default logos and images are
   cd /home/app/baseapp/src/assets/images

   Backup the default one, just in case you do something wrong
   cp LogoIcon.tsx LogoIcon.tsx.bak

   Download the new SVG logo. Just for demo
   curl https://www.flaticon.com/svg/static/icons/svg/2933/2933116.svg -o logo.svg

   Open new logo.svg via vim first and copy whole
   nano logo.svg

   Open LogoIcon.tsx, delete everything inside LogoIcon const and paste from logo.svg
   nano LogoIcon.tsx

   export const LogoIcon: React.FC = (props: LogoIconProps) => (
   // replace
   <path ... fill="var(--primary-text-color)"/> // replace
   <path ... fill="var(--primary-text-color)"/> // replace
   <path ... fill="var(--primary-text-color)"/> // replace
   <path ... fill="var(--primary-text-color)"/> // replace
   <path ... fill="var(--icons)"/> // replace
   // replace
   );

   Last step - add className={props.className} to the opening tag. It should look like this

   <svg className={props.className} ...other_attributes>

   Pay attention that most of the images have width and height attributes which are already preseted so, probably, you will have to change them.

   Keep the ratio between width and height for downloaded image, but don’t use height bigger than 60px (it will overflow the Header). So in the end my opening SVG tag inside the LogoIcon.tsx looks like that: <svg className={props.className} width=”60" height=”60" viewBox=”0 0 512 512">

   Change Icon
   cd /home/app/baseapp/public

   Edit the page title
   cd /home/app/baseapp/public
   nano index.html

   <title>AnythingLinux</title> // change name here

   This is the folder where React application constants stored
   nano /home/app/baseapp/src/constants/index.ts
   export const PG_TITLE_PREFIX = 'AnythingLinux'; // change name here

   Change HomePage Text
   nano /home/app/baseapp/src/translations/en.ts
   Change powered by
   nano /home/app/baseapp/src/containers/Footer/index.tsx