@rajputanuj31 change

v-if="listView === 'table' && !isEmpty"

change

v-else-if="listView === 'grid'  && !isEmpty"

Also instead of

<h4 v-if="isEmpty">
   {{ translate("COM_MEDIA_NO_MEDIA_FOUND") }}
 </h4>

we need something more to be inline with the other empty state pages, ie

A message is ok for now. We can do a followup with a more enhanced screen.

A message is ok for now. We can do a followup with a more enhanced screen.

I have almost completed it, will make a commit soon.

Hey @dgrammatiko , @laoneo Is this fine? also where can I find related documentation for this issue.

Is this screen visible then for every folder which is empty? It can be that there is no documentation for it.

Is this screen visible then for every folder which is empty? It can be that there is no documentation for it.

Yes it visible for every empty folders. Since no documentation for this issue so I will remove the Learn More link.

@rajputanuj31 sorry I miss guided you. What I meant was to refactor the drop state of the drag and drop to resemble the empty state for other components in Joomla. It doesn't have to be one to one the empty state of the other components

@rajputanuj31 also please apply the requested changes above. Thanks

@rajputanuj31 also please apply the requested changes above. Thanks

Here are the changes you've asked for.

Does this look good?

@dgrammatiko , @Quy , @laoneo please review my changes. Is there any more changes I need to make.

@rajputanuj31 personally I would go of something like

    <div
      v-if="isEmpty"
      class="text-center"
      style="display: grid; justify-content: center; align-content: center; height: 100%; margin-top: -1rem; color: var(--gray-200);"
    >
      <span
        class="fa-8x icon-cloud-upload upload-icon"
        aria-hidden="true"
      />
      <p>{{ translate("COM_MEDIA_DROP_FILE") }}</p>
    </div>

needs also

    /* The styles for the media-browser element */
    mediaBrowserStyles() {
      return {
        width: this.$store.state.showInfoBar ? '75%' : '100%',
        height: '100%',
      };
    },

Which results to a lighter icon/text and the icon and text are in the same position as the drag background.
Normal

On drag

@dgrammatiko after applying your changes icon remains at top but I made some changes using css those I am commiting

@rajputanuj31 did you replace also the mediaBrowserStyles() as I wrote above?

@rajputanuj31 did you replace also the mediaBrowserStyles() as I wrote above?

yes

Now we have a conflict here. Can you please check them, I guess the indentation of the tags has changed.