:bug: hotfix logo + icons padding for rtl languages

[a-tokyo]

• 🐛 fix logo padding for rtl languages by setting paddingRight instead of paddingLeft if html.style.direction is rtl

closes https://github.com/bndw/wifi-card/issues/203

[a-tokyo]

@bndw Can you elaborate more about what you mean with negatively impacting the layout?

– The UI layout is not affected (as I believe) – If you mean the code layout, I think I can create a util function that we can reuse instead of using the conditional check and object spreading!

[a-tokyo]

@bndw I worked on this a bit more and created a util function but I think it still has the same layout issue.

Example:

        <Heading
          size={900}
          {...handleDirStyle(
            {
              paddingLeft: 16,
            },
            html
          )}
        >
          {t('title')}
        </Heading>

/**
 * handles converting LTR styles to RTL styles if needed.
 */
const handleDirStyle = (ltrStyle, html) => {
  if (html?.style?.direction === 'rtl') {
    const rtlStyle = {};
    Object.keys(ltrStyle).forEach((key) => {
      if (key.endsWith('Left')) {
        rtlStyle[key.replace('Left', 'Right')] = ltrStyle[key];
      } else {
        rtlStyle[key] = ltrStyle[key];
      }
    });
  }
  return ltrStyle;
};

[bndw]

@A-Tokyo Can you confirm if https://github.com/bndw/wifi-card/pull/207 resolves the logo/icon paddings, as well? I think simply always adding a paddingRight is a simpler approach than addition conditional logic.

[a-tokyo]

@bndw it does